:root {
    color-scheme: only light;
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-image: url("./assets/images/backgrounds/defaultBg.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

#app {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

#payment-form-outer, #interstitial-outer {
    position: absolute;
    width: 100%;
    height: 100%; /* Fallback for browsers that do not support Custom Properties */
    //height: calc(var(--vh, 1vh) * 100);
    visibility: hidden;
    background-color: rgba(0,0,0,0.95);
    //display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#payment-form {
    position: absolute;
    width: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,0);
}
.qa-iframe-widget{
    width: 400px;
    padding: 30px 0 30px 0;
    background-color: white;
    border-radius:15px;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}


.preloader {
    width: 1120px;
    height: 1200px;
}

.preloader_inner {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 100%;
    aspect-ratio: 4680 / 2160;
    background-image: url("./assets/images/backgrounds/suitsBg.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no_webgl {
    font-family: "RobotoCustom";
    font-weight: 700;
    color: black;
    background-color: white;
    border-radius: 30px;
    width: 50%;
    height: 50%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    background-image: url("./images/game_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 9.61538%;
    height: 20.83333%;
    background-size: 100% 100%;
    margin-top: 15%;
}

.progress_bar {
    background-color: #005a94;
    width: 33%;
    height: 2.5%;
    border-radius: 15px;
    margin-top: 15%;
}

.bar {
    background-color: #fff;
    width: 0;
    height: 100%;
    border-radius: 15px;
}