html,
body{
    height: 100vh;
}

#gameCanvas{
    width: 100%;
    height: 100%;
}

h1,h2,h3,h4{
    
}


.login-container{
    padding-top: 5em;
    font-family: 'Open Sans';
}

.login-container h2{
    font-weight: 100;
}

.login-container .bg-image{
    position: absolute;
    top: 40%;
    left: -45%;
    filter: grayscale(90%) blur(10px);
}

.login-form{
    background-color: white;
}

.login-form.dark-bg{
    background-color: #90351fe6;
    color:white;
}


.text-muted {
    color: #532317 !important;
}

/*butons*/

.btn.btn-primary{
    background-color: #1F7A90;
    border-color: #1F7A90;
}

.btn.btn-primary:hover {
    color: #fff;
    background-color: #2498B5;
    border-color: #1F7A90;
}

.btn-outline-primary:hover {
    background-color: #2498B5;
    border-color: #1F7A90;
}
.btn-outline-primary {
    color: #444;
    border-color: #1F7A90;
}

.btn-link {
    font-weight: 400;
    color: white;
}

.btn-link:hover {
    color: #1F7A90;
}

.text-script{
    font-family: "Bad Script";
}

#customLoadingScreenDiv{
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: white;
}

#customLoadingScreenDiv .logo{
    width:20%;
    object-fit:contain;
}

.scores ul img{
    height: 50px;
}

.scores .badge{
    position: absolute;
    left: 5px;
}

.scores .badge.badge-warning{
    bottom: 3px;
}

span.players {
    font-size: 0.7em;
    float: right;
}