#unity-container { position: absolute }
#unity-container.unity-desktop {
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);
    width: 75%; 
}
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { 
    background: #231F20;
    width: 100%;
    aspect-ratio: 16/9;
    border: 2px solid black;
    border-radius: 3px;
 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar {
    position: absolute; 
    left: 50%; top: 50%; 
    transform: translate(-50%, -50%); 
    display: none;
    width: 300px;
}

#unity-progress-bar-empty { 
    width: 100%; 
    height: 18px; 
    margin-top: 10px; 
    margin-left: 6.5px; 
    background: transparent;
    border: 2px solid #BA182E;
    border-radius: 3px;
}

#unity-progress-bar-full { 
    width: 0%; 
    height: 18px; 
    margin-top: 0px; 
    background: #BA182E;
}

#progress-bar-text{
    width: 100%;
    color: white;
    font-size: 26px;
    text-align: center;
    margin: 0px;
}

/* .unity-mobile #unity-footer { display: none } */
/* #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center } */
/* #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px } */
#unity-fullscreen-button { 
    display: flex;
    align-self: center;
    cursor:pointer; 
    width: 24px;
    height: 24px; 
    /*background: url('fullscreen-button.png') no-repeat center; */ 
    color: whitesmoke;
    /*background-color:#BA182E;
    border: 5px solid #BA182E;
    border-radius: 3px;
    padding: 0px;
    text-align: center;
    align-items: center;
    justify-content: center;
    */
}

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

#page-title{
    top: -5px;
    display: inline-flex;
    align-items: baseline;
    left: 50%;
    transform: translate(-50%);
    position: fixed;
    text-wrap: nowrap;
}

.page-title{
    text-align: center;
    line-height: 5px;
    font-family: sans-serif;
    font-size: 16px;
    
}
.version{
    font-family: serif;
    text-align: center;
    padding: 5px;
}

.material-icons {
  vertical-align: top;
}
.material-icons.md-48{
    font-size: 36px;
}

#unity-footer{
    display: inline-flex;
    position: relative;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    top: -45px;
}

#nav-bar{
    font-size: 20px;
    display: inline-flex;
    align-items: center;
}

.nav-button{
    font-style: normal;
    color: whitesmoke;
    background-color: #BA182E;
    border: 2px solid #BA182E;
    border-radius: 4px;
    padding: 3px;
    align-items: center;
    justify-content: center;
    border-bottom-color:#831120;
    border-right-color:#831120;
    border-top-color:#c04e5d;
    border-left-color: #c04e5d;
    margin: 5px;
}

.nav-button:hover{
    background-color: #a0192b;
    border-top-color:#831120;
    border-left-color:#831120;
    border-bottom-color:#c04e5d;
    border-right-color: #c04e5d;
}

.nav-button a{
    color: inherit;
    text-decoration: inherit;
}

body { 
    padding: 0; 
    margin: 0;
    background-color: whitesmoke;
}

@media (prefers-color-scheme: light){
    body{
        background-color: whitesmoke;
    }
}

@media (prefers-color-scheme: dark){
    body{
        background-color: rgb(36, 36, 36);
    }
    #page-title{
        color: whitesmoke;
    }
}