@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 }
#unity-container { position: absolute; width: 100%; height: 100%; background-color:white }
#unity-container-overlay { 
    background-color:white;
    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-canvas { 
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
#unity-loading-bar { 
    position: absolute; 
    left: 50%; 
    bottom: 40%; 
    transform: translate(-50%, 0%); 
    display: none;
    width: 74%;
    height: 2.3%;
    overflow: hidden;
    border-radius: 20px;
}
#unity-progress-bar-empty {width: 100%; height: 100%; background-color: #CACACA;position: absolute;}
#unity-progress-bar-full {width: 0%; height: 100%; background-color: #DA7B2A; position: absolute;}

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

#main-title-text {
    position: absolute;
    font-family: Montserrat;
    font-weight: 600;
    color: #9B6100;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 50%;
    text-align: center;
    width: 100%;
    letter-spacing: 0.025em;
}

#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 }

#soparmall-logo {
    position: absolute;
    width: 20%;
    aspect-ratio: 2;
    bottom: 46%;
    left: 50%;
    transform: translate(-50%, 0%);
}
#unavailable-text {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #474747;
    font-size: 1.25rem;
    text-align: center;
    line-height: 100vh;
    letter-spacing: 0.025em;
    font-weight: 600;
    font-family: 'Montserrat';
    user-select: none;
}

#error-popup { position: absolute; left: 0px; top: 0px; background: rgba(0, 0, 0, 0.4); 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;}
#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;}
#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;}
#error-popup-button {
    background-color: #DA7B2A;
    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: #DA7B2A;
    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;
}