@font-face {
    font-family: Gotham SSm;
    /* src: url('/fonts/Gotham-SSm/GothamSSm-Black.otf'); */
    src: url('../fonts/Gotham-SSm/GothamSSm-Light.otf');
    /* src: url('/fonts/Gotham-SSm/GothamSSm-BlackItalic.otf');
    src: url('/fonts/Gotham-SSm/GothamSSm-Bold.otf');
    src: url('/fonts/Gotham-SSm/GothamSSm-BoldItalic.otf'); 
    src: url('fonts/Gotham-SSm/GothamSSm-Book.otf'); */
    /* src: url('/fonts/Gotham-SSm/GothamSSm-BookItalic.otf');
    src: url('/fonts/Gotham-SSm/GothamSSm-LightItalic.otf');
    src: url('/fonts/Gotham-SSm/GothamSSm-Medium.otf');
    src: url('/fonts/Gotham-SSm/GothamSSm-MediumItalic.otf'); */
}

html {
    margin: 0;
}

html {
    --vwidth: 100vw;
    --vheight: calc(16/9*var(--vwidth));
    font-size: calc(1/1080*var(--vwidth));
}

@media (min-aspect-ratio: 9/16) {
    html {
        --vheight: 100vh;
        --vwidth: calc(9/16*var(--vheight));
        font-size: calc(1/1920*var(--vheight));
    }
}

body {
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    overflow-y: scroll;
}

#loading-screen {
    z-index: 1;
}

.window {
    position: relative;
    display: flex;
    justify-content: center;
    height: 1920rem;
    width: 1080rem;
    overflow: hidden;
}

.movable_parent {
    position: absolute;
    top: 0rem;
    left: 0rem;
    --width: 1080rem;
    height: 1920rem;
    width: auto;
    display: flex;
    flex-direction: row;
    transition: left 0.5s linear;
    left: calc(var(--width)*0);
}

#loading-screen {
    position: relative;
    width: 1080rem;
    height: 1920rem;
    display: flex;
}

#background {
    margin: 0;
    position: relative;
    width: 1080rem;
    height: 1920rem;
    /* height: 100vh; */
    /*background: radial-gradient(119.99% 62.42% at 50% 36.33%, #7B16E1 0%, #000E87 100%);*/
    /* border: 1rem solid rgb(128, 128, 128); */
    display: flex;
    justify-content: center;
    /* font-family: Gotham SSm A, Gotham SSm B, Helvetica, sans-serif; */
    overflow: hidden;
}

#background .navigation_bar {
    display: none;
}

.BG_SVG {
    width: 1080rem;
    height: auto;
}

.navigation_bar {
    position: absolute;
    width: 55%;
    height: 5.6%;
    top: 5.3%;
    /* border: 1rem solid black; */
    border-radius: 200rem;
    background: rgb(109, 42, 244);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 2.5em;
    text-align: right;
    z-index: 1;
}

.observation_bar {
    height: 100%;
    width: 50%;
    /* border: 1rem solid black; */
    border-radius: 200rem;
    background: white;
    color: rgb(54, 18, 175);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 4rem 2rem 10rem 2rem rgba(0, 0, 0, 0.284);
    font-family: Gotham SSm;
    font-weight: 325;
    font-size: 36rem;
    line-height: 144.2%;
    /* font-size: 2.5em; */
    cursor: pointer;
}

.question_bar {
    height: 100%;
    width: 50%;
    /* border: 1rem solid black; */
    border-radius: 200rem;
    /* background:white; */
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-family: Gotham SSm;
    font-size: 36rem;
    font-weight: 325;
    line-height: 144.2%;
    /* font-size: 2.5em; */
    cursor: pointer;
}

#instructionArea {
    position: absolute;
    width: 90%;
    height: 6.88%;
    /* border: 1rem solid black;
    background: linear-gradient(yellow,orange); */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0rem;
    top: 15%;
    color: white;
    font-size: 39rem;
    font-weight: 325;
    font-family: Gotham SSm;
    line-height: 60rem;
}

/* For Visual area */

.visual_area {
    position: absolute;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 984rem;
    height: 631rem;
    top: 23.5%;
    /* background-image: radial-gradient(119.99% 62.42% at 50% 36.33%, #2d0457 0%, #000108 100%); */
    border-radius: 20rem;
    z-index: 0;
    overflow: hidden;
}

canvas {
    position: absolute;
    border-radius: 20rem;
    top: 23.5%;
    /* width:91.1%;
    height: 32.86; */
}

#VisualArea4 {
    background: radial-gradient(119.99% 62.42% at 50% 36.33%, #2d0457 0%, #000108 100%);
}

.symbol {
    position: absolute;
    /* border: 1rem solid white; */
    width: 9.2%;
    height: 5.2%;
    top: 47.38%;
    transform: translateY(-50%);
    color: white;
    font-size: 96rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Number {
    position: absolute;
    border: 5rem solid white;
    height: 4%;
    width: 7%;
    top: 49.2%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50rem;
    color: white;
    /* background:#26bca4; */
    font-family: Gotham SSm;
    border-radius: 10rem;
    transform: translateX(-50%);
}

.bars {
    position: absolute;
    width: 140rem;
    height: 15rem;
    left: 156rem;
    top: 904rem;
    background: #ffffff;
    border-radius: 5rem;
    transform: translatex(-50%);
    top: 47%;
}

#feedbackArea {
    position: absolute;
    width: 91.1%;
    height: 9.375%;
    /* padding: 15rem 20rem 15rem 20rem; */
    border-radius: 25rem;
    background: linear-gradient(#ffe401, #e98a2e);
    background-repeat: no-repeat;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    top: 58.3%;
    transition: opacity 0.5s, top 0.5s;
}

#feedbackArea p {
    position: relative;
    /* top: 0%; */
    width: 90%;
    /* height: max-content; */
    font-size: 36rem;
    line-height: 50rem;
    font-family: Gotham SSm;
    vertical-align: center;
}

/* .insideDiv{
    position: absolute;
    width: 94%;
    height: 75%;
    border: 4rem solid #17ada4; border-radius: 20rem;
    background: transparent;
    box-shadow: 0rem 5rem 5rem rgba(0, 0, 0, 0.493);
    border-top-style: 0rem 5rem inset;
} */

.numerical_pointer {
    position: absolute;
    top: 70%;
    width: 14%;
    height: 6%;
    border: 6rem solid rgb(255, 255, 255);
    border-radius: 20rem;
    background: linear-gradient(0deg, #1db3aa, #4dd3cc);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Gotham SSm;
    font-size: 50rem;
    color: rgb(241, 247, 246);
    transform: translateX(-50%);
}

.numerical_pointer::after {
    content: '';
    border-top: 20rem solid #ffffff;
    border-left: 20rem solid rgba(0, 0, 0, 0);
    border-right: 20rem solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
}

.Slider {
    position: absolute;
    -webkit-appearance: none;
    outline: none;
    height: 0.5%;
    width: 85%;
    top: 80%;
    /* border-radius: 50rem; */
    overflow: none;
    /* background:#4935DD; */
    /* direction:rtl; */
    transform: translateY(-50%);
    /* display: hidden; */
    z-index: 1;
    transform: translateY(-50%);
}

.Slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 60rem;
    height: 60rem;
    background: linear-gradient(#fb8d34, #f96074);
    /* background-image: url("/V2/Scale 2.png");
    background-repeat: no-repeat;
    background-position:right;
    background-size:115% auto; */
    cursor: pointer;
    border: none;
    border-radius: 50%;
    /* overflow:none; */
    z-index: 3;
}

.Slider::-moz-range-thumb {
    -webkit-appearance: none;
    width: 80rem;
    height: 80rem;
    background: linear-gradient(#fb8d34, #f96074);
    /* background-image: url("/V2/Scale 2.png");
    background-repeat: no-repeat;
    background-position:right;
    background-size:115% auto; */
    cursor: pointer;
    border: none;
    border-radius: 50%;
    /* overflow:none; */
    z-index: 3;
}

/* #custom_slider_thumb{
    position: absolute;
    top: 78%;
    width:100%;
    height:200rem;
    border: 1rem solid black;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: pointer;
    left:50%;
    display: none;
} */

.RangeValues {
    position: absolute;
    /* border: 1rem solid white; */
    height: 100rem;
    width: 100rem;
    bottom: 11.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 43rem;
    font-family: Gotham SSm;
    color: white;
    /* display: none; */
}

button.Next-Button {
    position: absolute;
    width: 45%;
    height: 6.7%;
    top: 88.5%;
    border: none;
    border-radius: 200rem;
    background: linear-gradient(90deg, #10dca3, #3988fa);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: Gotham SSm;
    font-size: 42rem;
    line-height: 42rem;
    font-weight: 350;
    cursor: pointer;
}

button#reset {
    position: absolute;
    width: 45%;
    height: 6.7%;
    top: 80%;
    border: none;
    border-radius: 200rem;
    background: linear-gradient(45deg, #10dca3, #3988fa);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: Gotham SSm;
    font-size: 42rem;
    line-height: 42rem;
    font-weight: 350;
    cursor: pointer;
}