@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

@font-face {
	font-family: 'Montserrat';
	src: url('fonts/Montserrat-Medium.ttf');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('fonts/Montserrat-SemiBold.otf');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('fonts/Montserrat-Bold.ttf');
	font-weight: 700;
	font-style: normal;
}

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

html {background-color: black}
body {margin: 0 }

a {
    color: #42B9D6;
    text-decoration: none;
}


.unity-container-default { 
    position: absolute; width: 100%; height: 100%; background-color:rgb(0, 0, 0) 
}
.unity-container-overlay-default { 
    background-color:rgb(0, 0, 0);
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; 
    height: 100%;
    transition: background-color 2000ms linear;
}

.unity-container-mayatwin { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-image: url(MayaTwinDefaultBackground.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%; 
}
.unity-container-overlay-mayatwin { 
    background:url(mayatwin_loading_bg.png);
    padding: 0;
    margin: auto;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120%; 
    height: 154%;
    opacity: 0.3;
    transform: translate(-50%, -50%) rotate(-13deg);
    background-attachment: fixed;
    background-size: cover;
    background-position: 0vw 0;
    background-repeat: repeat;
    animation: scrollbglandscape 12s infinite linear;
}

@keyframes scrollbglandscape {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -120vw 0;
    }
}

@keyframes scrollbgportrait {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -120vh 0;
    }
}

#unity-canvas { 
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#unity-loading-bar { 
    position: absolute; 
    left: 50%; 
    bottom: 10%; 
    transform: translate(-50%, 0%); 
    display: none;
    width: 52.61%;
    height: 36px;
    overflow: hidden;
    border-radius: 20px;
}
#unity-progress-bar-empty {width: 100%; height: 100%; background-color: white;position: absolute;}
#unity-progress-bar-full {width: 0%; height: 100%; background-color: #42B9D6; position: absolute;}

#unity-progress-bar-text {
    width: 100%;
    position: absolute;
    z-index: 1;
    text-align: center;
    color: #474747;
    bottom: 50%;
    transform: translate(0, 50%);
    font-family: Montserrat;
    font-weight: 700;
}

#mayatwin-logo-container {
    position: absolute;
    top: 13.15%;
    width: 13.33%;
    left: 50%;
    transform: translate(-50%, 0%);
    aspect-ratio: 1;
    display: none;
}

#mayatwin-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#entering-space-text {
    position: absolute;
    text-align: center;
    color: #FFFFFF;
    font-size: 45px;
    font-family: Montserrat;
    font-weight: 600;
    left: 48.18%;
    bottom: 54.6%;
    transform: translate(-50%, 50%);
    white-space: nowrap;
}

#entering-space-text-dots {
    position: absolute;
    left: 100%;
    top: 0%;
    text-align: left;
}

#overlay-error-text {
    position: absolute;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.355vw;
    font-family: Montserrat;
    font-weight: 600;
    left: 50%;
    bottom: 54.6%;
    transform: translate(-50%, 50%);
    display: none;
}

#powered-by-background {
    position: absolute; 
    left: 50%; 
    bottom: 10%; 
    transform: translate(-50%, 0%); 
    display: none;
    width: 17.96%;
    height: 3.7%;
    overflow: hidden;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.55);
}

#powered-by-text {
    position: absolute;
    text-align: center;
    color: #FFFFFF;
    font-size: 17px;
    font-family: Montserrat;
    font-weight: 600;
    left: 50%;
    bottom: 11.2%;
    transform: translate(-111.3%, 50%);
    white-space: nowrap;
}

#kotamaya-text {
    position: absolute;
    height: 2.5em;
    top: -0.5em;
    margin-left: 0.5em;
}
#kotamaya-logo {
    position: absolute;
    height: 1.5em;
    top: -0.15em;
    margin-left: 6.2em;
}

#unity-footer { position: relative; 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 { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#error-popup { position: absolute; left: 0px; top: 0px; background: rgba(0, 0, 0, 0.4); display: none; width: 100%; height: 100%;}
#background-error-popup { position: absolute; left: 0px; top: 0px; display: none; width: 100%; height: 100%;}
#error-popup-panel { background: white; padding: 0px; position: absolute; aspect-ratio: 1.1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 6%; overflow: hidden;}
#background-error-popup-panel { background: white; padding: 0px; position: absolute; aspect-ratio: 1.1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 0.7em; overflow: hidden;}
#error-popup-title-text {text-align: center; color: #474747; font-family: Montserrat; font-weight: 600; margin: 1.818em; margin-top: 1.818em; margin-bottom: 0em; font-size: 1em;}
#background-error-popup-title-text {text-align: center; color: #474747; font-family: Montserrat; font-weight: 600; margin: 1.3em; margin-top: 1.3em; margin-bottom: 0em; font-size: 1em;}
#error-popup-body-text {text-align: center; color: #474747; font-family: Montserrat; margin: 1.818em; margin-top: 1em; font-size: 0.85em; word-break: break-word;}
#background-error-popup-body-text {
    text-align: center; 
    color: #474747; 
    font-family: Montserrat; 
    margin: 1.2em; 
    margin-top: 0.8em; 
    font-size: 0.85em; 
    word-break: break-word;
}
#error-popup-button {
    background-color: #42B9D6;
    border: none;
    color: white;
    padding: 0.6111em;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    font-family: Montserrat;
    font-weight: 600;
    border-radius: 0.88888em;
    width: 60%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 5.4em;
}
#error-popup-button2 {
    background-color: #42B9D6;
    border: none;
    color: white;
    padding: 0.6111em;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    font-family: Montserrat;
    font-weight: 600;
    border-radius: 0.88888em;
    width: 60%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 1.8em;
}
#rotate-icon {
    position: absolute;
    aspect-ratio: 1;
    transform: rotate(101deg);
    top: 5%;
    display: none;
}
#rotate-text {
    text-align: center;
    color: white;
    font-family: Montserrat;
    font-size: 2.2vh;
    padding-top: 15%;
    top: 10%;
    width: 70%;
    position: absolute;
    display: none;
}

#tray-panel {
    background: white;
    padding: 0px;
    width: 25vw;
    position: fixed;
    aspect-ratio: 1.3;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 100%);
    border-top-left-radius: 6%;
    border-top-right-radius: 6%;
    display: none;
    transition: transform 0.5s ease 1s;
}
#tray-title-text {
    text-align: center;
    color: #474747;
    font-family: Montserrat;
    font-weight: 700;
    margin: 10%;
    margin-top: 13%;
    font-size: 1.45vw;
}
#tray-button {
    background-color: #42B9D6;
    border: none;
    color: white;
    padding: 0.8em;
    text-align: center;
    text-decoration: none;
    font-size: 1.25vw;
    cursor: pointer;
    font-family: Montserrat;
    font-weight: 600;
    border-radius: 10em;
    width: 80%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 25%;
}

#mayatwin-notfound-title {
    display: none;
    position: absolute;
    text-align: center;
    color: #42B9D6;
    font-size: 50px;
    font-family: Montserrat;
    font-weight: 600;
    left: 50%;
    top: 40%;
    transform: translate(-50%, 0%);
    width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#mayatwin-notfound-body {
    display: none;
    position: absolute;
    text-align: center;
    color: #474747;
    font-size: 24px;
    font-family: Montserrat;
    font-weight: 600;
    left: 50%;
    top: 48.2%;
    transform: translate(-50%, 0%);
    width: 30em;
}
#mayatwin-notfound-image {
    display: none;
    position: absolute;
    height: 23%;
    left: 50%;
    top: 15%;
    transform: translate(-50%, 0%);
}
#mayatwin-notfound-gotohome {
    display: none;
    background-color: #42B9D6;
    border: none;
    color: white;
    padding: 0.7em;
    text-align: center;
    text-decoration: none;
    font-size: 1.2vw;
    cursor: pointer;
    font-family: Montserrat;
    font-weight: 600;
    border-radius: 10em;
    width: 17em;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

#click-to-refresh-text {
    display: none;
    position: absolute;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.6vh;
    font-family: Montserrat;
    font-weight: 500;
    left: 50%;
    top: 45%;
    transform: translate(-50%, 0%);
    width: 75vw;
}