@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 {
    font-size: calc(1/1080*100vw);
}

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

body {
    /* min-height: 100vh; */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* This part is for showing the slider animation */

.window {
    position: relative;
    height: 1920rem;
    width: 1080rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
}

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

.background {
    position: relative;
    width: 1080rem;
    height: 1920rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.background2 {
    position: relative;
    width: 1080rem;
    height: 1920rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* background: radial-gradient(119.99% 62.42% at 50% 36.33%, #7B16e1 0%, #000e87 100%); */
    overflow: hidden;
}

.BG_svg {
    width: 100%;
    height: 100%;
}

/* For the cross symbol */

.cross_symbol_container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 108rem;
    height: 108rem;
    left: 48rem;
    top: 102rem;
    opacity: 0.5;
    /* background: grey; */
    z-index: 1;
}

.cross_symbol_container .cross_oval {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    /* background-color: blue; */
}

.cross_oval .cross_hand {
    position: absolute;
    width: 54rem;
    height: 6rem;
    top: 50%;
    left: 50%;
    background-color: #9C88D8;
}

.cross_oval #hand1 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cross_oval #hand2 {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* For navigation bar. When selected the 'nav_selected' class is to be added in js. And the direction of the box shadow should be changed depending on the situation */

.navigation_bar {
    position: absolute;
    width: 55%;
    height: 5.6%;
    top: 5.3%;
    border-radius: 200rem;
    background: rgb(109, 42, 244);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 36rem;
    text-align: center;
    font-family: Gotham SSm;
    font-weight: 325;
    line-height: 144.2%;
    cursor: pointer;
    color: white;
    z-index: 1;
}

.observation_bar {
    height: 100%;
    width: 50%;
    border-radius: 200rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.question_bar {
    height: 100%;
    width: 50%;
    border-radius: 200rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav_selected {
    background: white;
    color: rgb(54, 18, 175);
    box-shadow: 4rem 2rem 10rem 2rem rgba(0, 0, 0, 0.284);
    /*The direction needs to be changed by putting a 'minus' sign befer '4rem'*/
}

.nav_selected2 {
    background: white;
    color: rgb(54, 18, 175);
    box-shadow: -4rem 2rem 10rem 2rem rgba(0, 0, 0, 0.284);
    /*The direction needs to be changed by putting a 'minus' sign befer '4rem'*/
}

/* For the instruction area */

.instructino_area {
    position: absolute;
    width: 984rem;
    height: 240rem;
    top: 258rem;
    display: flex;
    justify-content: center;
}

.instructino_area p {
    margin: 0;
    font-family: Gotham SSm;
    font-style: normal;
    font-weight: 300;
    font-size: 39rem;
    line-height: 60rem;
    /* or 154% */
    color: #FFFDFD;
    width: 100%;
}

/* For Visual area */

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

.visual_area .heading {
    position: absolute;
    top: 0rem;
    width: 100%;
    height: 85rem;
    background-color: #C3A7FE;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.heading p {
    position: relative;
    width: 100%;
    font-family: Gotham SSm;
    color: black;
    font-size: 48rem;
    text-align: center;
}

.visualCanvas {
    position: absolute;
    top: 0rem;
    right: 0rem;
    z-index: 0;
    overflow: hidden;
    z-index: 0;
    transition: transform 0.5s;
}

.canvasNotZoomed {
    transform-origin: right;
    transform: scale(calc(1/1.3));
}

/* .visual_area #canvas0{
    background-image: radial-gradient(119.99% 62.42% at 50% 36.33%, #2d0457 0%, #000108 100%);
} */

.visual_area svg {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0%;
}

.blur {
    --blurValue: 5rem;
    filter: blur(var(--blurValue));
}

.visual_area .imageContainer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.visual_area #leftSide {
    position: absolute;
    top: 0rem;
    left: 0rem;
    height: 100%;
    width: 30%;
    /* outline: 2rem solid white; */
    border-right: 2rem solid white;
    z-index: 1;
}

.visual_area #leftSide #leftBackground {
    position: absolute;
    width: 100%;
    left: 0rem;
    bottom: -5rem;
    z-index: -1;
}

.foreGroundImgContainer, .treeImgContainer {
    position: absolute;
}

.treeImgContainer {
    width: 60%;
    left: 36%;
    bottom: 26.7%;
}

.foreGroundImgContainer {
    bottom: 0rem;
    left: 0rem;
    width: 75%;
}

#leftForeground, #leftTree {
    position: relative;
    width: 100%;
    height: auto;
}

/* for the right side images */

.visual_area #rightSide {
    position: absolute;
    top: 0rem;
    right: 0rem;
    height: 100%;
    width: 69.8%;
    /* border-left: 2rem solid white; */
    background-image: radial-gradient(119.99% 62.42% at 50% 36.33%, #2d0457 0%, #000108 100%);
    transform-origin: right;
    transition: transform 0.5s;
}

.zoomRight {
    transform-origin: right;
    transform: scale(1.31);
}

.treeImgContainerRight {
    position: absolute;
    width: 20%;
    bottom: 40%;
    left: 5%;
    transition: opacity 0.5s;
}

.juiceCanImgContainerRight {
    position: absolute;
    width: 20%;
    left: 31%;
    bottom: 33%;
    transition: opacity 0.5s;
    z-index: 99;
}

#rightTree, #rightJuiceCan {
    position: relative;
    width: 100%;
    height: auto;
}

.eyeImageContainer {
    position: absolute;
    width: 300rem;
    right: -12rem;
    top: 29.75%;
}

.eyeImageContainer #eyeImg {
    position: relative;
    width: 100%;
    height: auto;
}

/* Styles for the labels */

.visual_area .labels {
    --vHeight: 0;
    position: absolute;
    bottom: 15%;
    width: 120rem;
    height: 80rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    transition: opacity 0.5s;
}

.visual_area #label1 {
    background-color: #0099BB;
    width: 150rem;
    left: 15%;
    height: 80rem;
}

.visual_area #label2 {
    background-color: #0099BB;
    width: 150rem;
    left: 41%;
    height: 80rem;
}

.visual_area #label3 {
    background-color: #0099BB;
    width: 299rem;
    left: 75%;
    height: 80rem;
}

#label3 #vStick3, #round3 {
    right: 50rem;
}

#label3 #vStick3 {
    height: 112rem;
}

#label3 #round3 {
    bottom: calc(100% + 112rem);
    transform: translateX(40%);
}

/* .zoomOut and .zoomOutHand are only four 'corrective lens' label styles */

.visual_area .zoomOut {
    top: 25% !important;
    left: 20% !important;
    transform-origin: right;
    transform: scale(0.77);
}

.visual_area #label4 {
    background-color: #0099BB;
    width: 221rem;
    left: 33%;
    top: 20%;
    height: 34rem;
}

#label4 #lensLabel {
    transform-origin: top;
    transform: rotate(-83deg) translateX(50%);
    height: 80rem;
}

#label4 .zoomOutHand {
    transform: rotate(-90deg) translateX(50%) !important;
}

#label4 #lensLabelRound {
    top: 100%;
}

.labels p {
    font-family: Gotham SSm;
    text-align: center;
    color: white;
    font-style: normal;
    font-weight: 325;
    font-size: 28rem;
    line-height: 34rem;
    margin: 5rem 0rem;
}

.labels .hTopBar {
    position: absolute;
    top: -6rem;
    width: 100%;
    border-top: 4rem solid white;
}

.labels .hBottomBar {
    position: absolute;
    bottom: -6rem;
    width: 100%;
    border-bottom: 4rem solid white;
}

.labels .vMiddleBar {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6rem);
    height: 60rem;
    width: 2rem;
    background-color: white;
    transform: translateX(-50%);
}

.labels .vRightBar {
    position: absolute;
    right: 0%;
    bottom: calc(100% + 6rem);
    height: 60rem;
    width: 2rem;
    background-color: white;
}

.labels .vRightBarDown {
    position: absolute;
    right: 0%;
    top: calc(100% + 6rem);
    height: 60rem;
    width: 2rem;
    background-color: white;
}

.labels .roundTop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 60rem);
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background-color: #ffffff;
    transform: translateX(-50%);
}

.labels .roundTopRight {
    position: absolute;
    right: 0%;
    bottom: calc(100% + 60rem);
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background-color: #ffffff;
    transform: translateX(40%);
}

.labels .roundTopRightDown {
    position: absolute;
    right: 0%;
    top: calc(100% + 60rem);
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background-color: #ffffff;
    transform: translateX(40%);
}

/* The ray arrow on the light rays */

.lightArrowContainer {
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    top: 210rem;
    left: 50%;
    width: 160rem;
    height: 65rem;
    opacity: 0;
    /* outline: 1rem solid rgb(201, 201, 201); */
}

.lightArrowContainer .textLight {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 35rem;
}

.lightArrowContainer .textLight p {
    color: #000000;
    font-family: Gotham SSm;
    font-size: 28rem;
    font-weight: 325;
}

.lightArrowContainer .rays {
    position: relative;
    left: 5%;
    width: 90%;
    height: 3rem;
    background-color: #F3F3F3;
}

.rays .arrowHead1 {
    position: absolute;
    right: 0rem;
    height: 3rem;
    width: 10rem;
    transform-origin: right;
    transform: rotate(45deg);
    background-color: #F3F3F3;
    border-radius: 50%;
}

.rays .arrowHead2 {
    position: absolute;
    right: 0rem;
    height: 3rem;
    width: 10rem;
    transform-origin: right;
    transform: rotate(-45deg);
    background-color: #F3F3F3;
    border-radius: 50%;
}

/* reset button */

.visual_area .resetButtonContainter {
    position: absolute;
    bottom: 24rem;
    right: 24rem;
    height: 60rem;
    width: 179rem;
    /* background-color: white; */
    cursor: pointer;
    display: none;
}

.resetButtonContainter #resetButtonImg {
    width: 100%;
    height: auto;
}

/* For the status bar */

.statusDotContainer {
    position: absolute;
    /* border: 1rem solid white; */
    top: 1030rem;
    width: 270rem;
    height: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statusDotContainer .statusDots {
    position: relative;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.5;
}

.statusDotContainer #dot1 {
    background: white;
    opacity: 1;
}

.statusDotContainer .statusBar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 5rem;
    --minValue: 30rem;
    background-image: linear-gradient(to right, #0000 0%, #0000 calc(var(--minValue)*1), #fff8 calc(var(--minValue)*1), #fff8 calc(var(--minValue)*2), #0000 calc(var(--minValue)*2), #0000 calc(var(--minValue)*3), #fff8 calc(var(--minValue)*3), #fff8 calc(var(--minValue)*4), #0000 calc(var(--minValue)*4), #0000 calc(var(--minValue)*5), #fff8 calc(var(--minValue)*5), #fff8 calc(var(--minValue)*6), #0000 calc(var(--minValue)*6), #0000 calc(var(--minValue)*7), #fff8 calc(var(--minValue)*7), #fff8 calc(var(--minValue)*8), #0000 calc(var(--minValue)*8), #0000 calc(var(--minValue)*9));
}

.statusDotContainer #frontBar {
    background-color: #ffffff;
    width: 0%;
}

/* For feedback bar */

.feedback_bar {
    position: absolute;
    border-radius: 20rem;
    width: 984rem;
    height: 180rem;
    top: 1090rem;
    background: linear-gradient(180deg, #12EAFA 0%, #0787E2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s, top 0.5s;
}

.feedback_bar p {
    font-family: Gotham SSm;
    font-weight: 80;
    font-size: 36rem;
    margin: 5rem 10rem;
    width: 100%;
    text-align: center;
}

/* For interaction area */

.interaction_area {
    position: absolute;
    top: 68.4%;
    width: 90%;
    height: 18%;
    /* outline: 1rem solid white; */
    display: flex;
    align-items: center;
    flex-direction: column;
}

.interactionOptions {
    border: none;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180rem;
    width: 472rem;
    z-index: 0;
    background: linear-gradient(180deg, #CF47FF 0%, #7E00EE 100%);
    box-shadow: 0rem 4rem 8rem rgba(0, 0, 0, 0.25);
    border-radius: 24rem;
    font-size: 36rem;
    font-family: Gotham SSm;
    color: white;
    cursor: pointer;
    transition: opacity 0.4s;
    transform: translateY(-50%);
}

.buttonSelected {
    border: 3rem solid white;
}

.interactionOptions:active {
    transform: scale(0.95) translateY(-50%);
}

.interaction_area #leftButton {
    top: 50%;
    left: 0%;
}

.interaction_area #rightButton {
    top: 50%;
    right: 0%;
}

.interaction_area .input_slider {
    -webkit-appearance: none;
    outline: none;
    overflow: none;
    width: 100%;
    height: 10rem;
    position: absolute;
    top: 172rem;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
    display: none;
}

.interaction_area .marker {
    position: absolute;
    background-color: white;
    height: 38rem;
    width: 12rem;
    border-radius: 5rem;
    z-index: 0;
    top: 51%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.4s;
}

#markerLeft {
    left: 0%;
}

#markerMiddle {
    left: 50%;
}

#markerRight {
    right: 0%;
}

.input_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 60rem;
    height: 60rem;
    background: linear-gradient(#fb8d34, #f96074);
    border: none;
    border-radius: 50%;
    z-index: 3;
}

.input_slider::-moz-range-thumb {
    -webkit-appearance: none;
    width: 80rem;
    height: 80rem;
    background: linear-gradient(#fb8d34, #f96074);
    cursor: pointer;
    border: none;
    border-radius: 50%;
    z-index: 3;
}

.interaction_area .interactionAreaText {
    position: absolute;
    height: 50rem;
    font-size: 36rem;
    font-family: Gotham Ssm;
    color: white;
    opacity: 0;
    transition: opacity 0.4s;
}

.interaction_area #diverging {
    left: 0rem;
    top: 25%;
}

.interaction_area #converging {
    right: 0%;
    top: 25%;
}

.interaction_area #curvature {
    bottom: 10%;
}

.next_button {
    position: absolute;
    top: 1704rem;
    width: 45%;
    height: 128.64rem;
    border: none;
    border-radius: 200rem;
    background: linear-gradient(90deg, #10dca3, #3988fa);
    color: white;
    font-family: Gotham SSm;
    font-weight: 350;
    font-size: 39rem;
    cursor: pointer;
    display: none;
}