#create-room-button{
    height:8%;
    width:28%;
    top:85%;
    left: 36%;
    border-radius: 2vmin;
    background-color: #f6f0b6;
    box-shadow:2px 2px 2px 2px #d0c984;
    font-size:3vmin;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
}

#create-room-button:hover{
    background-color: #f8f3c5;
    box-shadow:2px 2px 2px 2px #d6d098;
}

#create-room-button:active{
    background-color: #f1eaa3;
    box-shadow:-2px -2px 2px 2px #c8c071;
    padding:2px 0 0 2px;
}

#create-room-cover{
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
    background-color: black;
    opacity: 0.5;
    position: absolute;
    display:none;
}

#create-room-box{
    height: 60%;
    width: 60%;
    top:20%;
    left:20%;
    border-radius: 2vmin;
    box-shadow: 0 0 0 4px #c6ae71;
    background-color: #f6f4df;
    position: absolute;
    display:none;
}

#create-room-title{
    height:10%;
    width:97%;
    top:1.875%;
    left:1.5%;
    background-color: #e3dfa8;
    border-radius: 1vmin;
    font-size:3vmin;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

#create-button,#cancel-create-button{
    height:12%;
    width:30%;
    top:80%;
    border-radius: 2vmin;
    background-color: #f6f0b6;
    box-shadow:1px 1px 1px 1px #d0c984;
    font-size:2.5vmin;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

#create-button{
    left:15%;
}

#cancel-create-button{
    right:15%;
}

#create-button:hover,#cancel-create-button:hover{
    background-color: #f8f3c5;
    box-shadow:1px 1px 1px 1px #d6d098;
}

#create-button:active,#cancel-create-button:active{
    background-color: #f1eaa3;
    box-shadow:-1px -1px 1px 1px #c8c071;
    padding:1px 0 0 1px;
}

#require-password-box{
    height:15%;
    width:70%;
    top:20%;
    left:15%;
    background: #9f7676;
    position:absolute;
}

#require-password-checkbox{
    height:2.2vmin;
    width:2.2vmin;
    border-radius: 0.2vmin;
    border:0;
    box-shadow: 0 0 0 1px #00559f;
    background-color: #ddeafc;
    margin-right: 0.8vmin;
    opacity: 0.3;
    cursor:pointer;
}

#require-password-checkbox:hover{
    background-color: #bdd4f5;
    box-shadow: 0 0 4px 1px #00559f;
}

#required-password{

}