#webBody .b .bg{
    background-color: rgb(4, 29, 19);
    background-image: url('./assets/bg.png');
    background-repeat: no-repeat; /* Prevents the background from repeating */
    background-attachment: fixed; /* Ensures the background stays fixed when scrolling */
    background-size: 100%;
    background-position: center center;
}
#webBody{
    background-color: rgb(4, 29, 19);
}
#roomId,#name{
    
    
   
    width:100%;
    height:20%;
    text-align: center;
    border:none;
    padding:0;
    outline: none;
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    margin-bottom: 5%;
    transition: box-shadow 0.2s;
}
#roomId:focus,#name:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    background-color: rgb(0, 36, 67);
  }
#roomId{
    
    width:100%;
}
#roomjoin{
    width:350px;
    height:250px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
#info{
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:350px;
    height:250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
#info h2{
height:36%;
margin:0;
padding-right: 4px;
flex-shrink: 0;
margin-bottom: 5%;
text-align: center;
color: rgb(113, 155, 255);
}
#info > div{
    display: flex;
    height:20%;
    width:100%;
    gap: 5%;
}
#info button,#roomjoin button{
    height:100%;
    width:50%;
    border:none;
    padding:0;
    outline: none;
    background-color: rgb(0, 128, 255);
    cursor: pointer;
    transition:  background-color 0.2s;
    }
    #roomjoin button{height:20%;width:100%; ;}
    #roomjoin > button:first-of-type{ margin-bottom: 5%;}
     #currentRoom{
        height:50px;
        margin:0;
        
      position: absolute;
     color: rgb(205, 231, 255);
     left:50%;
     top:50%;
     transform: translate(-50%,-50%);
        z-index: 1;
        font-family: Arial, Helvetica, sans-serif;
    }
    #info button:hover,#roomjoin button:hover{
        background-color: rgb(160, 207, 255);
    }
    #goal{
        position: absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        z-index: 1;
        mix-blend-mode: screen;
        pointer-events: none;
    }
   #connectError{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
    color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
    align-items: center;
    justify-content: center;
    display: flex;
   }
   #connectError h3{
    width:2000px;
    height:1000px;
    text-align: center;
   }
   #faults{
    position: absolute;
    width:auto;
    height:3%;
    left:5px;
    top:2.5%;
    padding: 0%;
    margin: 0%;
    transform: translate(0%,-50%);
    z-index: 2;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(255, 162, 0);
   }
   #msgList{
    position: absolute;
    right:0;
    top:0;
    width:20%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    margin: 10px;
    box-sizing: border-box;
   }