html{
    box-sizing:border-box;
}
*,*:before,*:after{
    box-sizing:inherit
}
html,body{
    height:100%;
    touch-action: manipulation;
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
    overflow-y: hidden;
    overscroll-behavior-y: none;
    touch-action: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
canvas{
    display:block
}
body{
    margin:0;
    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight:600;
}

#unity-container{
    width:100%;
    height:100%;
    background:url(background.webp) no-repeat center;
    background-size:cover
}

#unity-canvas{
    margin-left:auto;
    margin-right:auto;
    height:100%;
    /*aspect-ratio:9/16;*/
    max-width:100%
}

#unity-loading-bar{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    align-self:end;
    padding-bottom:70px
}

#loading-cover{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    display:flex;
    background:url(loadscreen.webp) no-repeat center;
    background-size:cover
}

#unity-progress-bar-empty{
    display:flex;
    background:rgba(19,41,77,.8); /* */
    justify-content:flex-start;
    align-items:center;
    padding:3px;
    border-radius:3px;
    height:48px;
    width:80%;
    flex-shrink:0;
    border:5px solid!important;
    border-color:rgb(44 74 116/100%)!important; /* */
    filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.70))
}

#unity-progress-bar-full{
    border-radius:3px;
    background:linear-gradient(180deg,#8bdaf8 19.49%,#81e1f8 89.05%);
    height:100%;
    width:90%;
}

.light #unity-progress-bar-empty{
    border-color:#000
}

.light #unity-progress-bar-full{
    background:#000
}




.spinner,.spinner:after{
    border-radius:50%;
    width:5em;
    height:5em
}
.spinner{
    margin:10px;
    font-size:10px;
    position:relative;
    text-indent:-9999em;
    border-top:1.1em solid rgba(255,255,255,.2);
    border-right:1.1em solid rgba(255,255,255,.2);
    border-bottom:1.1em solid rgba(255,255,255,.2);
    border-left:1.1em solid #1edb00;
    transform:translateZ(0);
    animation:spinner-spin 1.1s infinite linear;
    visibility:hidden
}
@keyframes spinner-spin{
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}
p.loading-step{
    text-align:center;
    vertical-align:middle;
    font-size:20px;
    color:#fff;
    margin-top: 18px;
    text-shadow: 0px 2px 2px #333;
}
@keyframes blink{
    50%{
        color:transparent
    }
}
.blink_dot{
    animation:1s blink infinite
}
.blink_dot:nth-child(2){
    animation-delay:250ms
}
.blink_dot:nth-child(3){
    animation-delay:500ms
}
@media screen and (max-width:480px){
    p.loading-step{
        font-size:19px
    }
}


canvas:focus {
    outline:  none;
}