/*  General Styles Start */
* {
    margin: 0;
    padding: 0;
    font-family: 'Sniglet', cursive;
    box-sizing: border-box;
}

html,
body {
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
    overscroll-behavior: contain;    
    /*touch-action: none;
    -ms-touch-action: none;    */
}

.circle {
    border-radius: 100%;
}

.hidden {
    visibility: hidden;
}

a:link {
    text-decoration: inherit;
    color: inherit;
}

a:visited {
    text-decoration: inherit;
    color: inherit;
}

.abs {
    position: absolute;
}

#backgrounds {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgb(246, 246, 232);
}


.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;

}

#bg_kids {
    transition: opacity 0.75s linear;
}

#bg_transition {
    opacity: 0;
    transition: opacity 1s ease-in-out 0.5s;
}

.noTransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

#transition {
    position: absolute;
    opacity: 0;
    background-color: #20202F;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    transition: opacity 0.5s linear;
}

/*min: 1.5rem font-size: clamp(1.5rem,2vw,);*/
.title {
    font-size: clamp(1.5rem, 3vw, 6rem);
    color: rgb(34, 58, 103);
}

.subtitle {
    font-size: clamp(0.75rem, 1.5vw, 3rem);
    color: rgb(34, 58, 103);
}

.description {
    font-size: clamp(0.4rem, 1.3vw, 2.5vh);
    color: rgb(34, 58, 103);
    font-family: sofia-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 120%;
}

.questionButton {
    width: 100%;
    height: 5vh;
    margin-top: 2vh;
    border: none;
    border-radius: 60px;
    color: #20202F;
    text-align: center;
    font-size: clamp(0.6rem, 1.35vw, 3rem);
}

.unknownAnswer {
    background-color: rgb(170, 210, 221);
}



.wrongAnswer {
    background-color: #C8AC9D;
}

.correctAnswer {
    background-color: #CCCB74;
}

#hitboxes {
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hitbox {
    position: absolute;
    border-radius: 50%;
}



#hitbox_1 {
    height: 17vh;
    width: 20vw;
    left: 28%;
    bottom: 16%;
}

#hitbox_2 {
    height: 14vh;
    width: 18vw;
    left: 41%;
    bottom: 40%;
}

#hitbox_3 {
    height: 9vh;
    width: 13vw;
    left: 67%;
    bottom: 42%;
}

#hitbox_4 {
    height: 5vh;
    width: 12vw;
    left: 61%;
    bottom: 61%;
}

#hitbox_5 {
    height: 5vh;
    width: 10vw;
    left: 79%;
    bottom: 68%;
}

.not-displayed {
    display: none !important;
}

#standard_Screen {
    width: 100%;
    height: 100%;
    background-color: rgb(246, 246, 232);

}
#map_help{
    position: absolute;
    width: 20%;
    bottom: 5%;
    right: 5%;
    text-align: center;
}
/*  General Styles End */

/*  Header Styles Start*/

header {
    position: relative;
    height: 10%;
}

header * {
    z-index: 1;
}

nav {
    position: absolute;
    display: flex;
    left: max(20vh, 25vw);
    top: 3vh;
    font-size: clamp(0.4rem, 1.50vw, 3rem);
    color: rgb(222, 165, 131);
}


nav * {
    margin-right: 3vw;
}



#dark_circle {
    position: absolute;
    width: min(30vw, 30vh);
    height: min(30vw, 30vh);
    transform: translate(-15%, -40%);
    background-color: rgb(32, 32, 47);
    color: rgb(255, 247, 64);
    font-size: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dark_circle * {
    position: absolute;
    width: 50%;
    margin-top: 25%;
}

#light_circle {
    position: absolute;
    transform: translate(175%, -25%);
    width: 10vh;
    height: 10vh;
    background-color: rgba(86, 165, 188, 50);
}

/*  Header Styles End*/


/*  Login Screen Styles Start*/
#login_Screen {
    position: absolute;
    min-width: 400px;
    width: 25%;
    height: 100%;
    left: 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}


.login_input {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    padding: 20px 20px;
    border: none;
    border-radius: 60px;
    background-color: rgb(170, 210, 221);
    text-align: center;
    font-size: 27px;
}

#login_continue {
    margin-top: 20px;
    align-self: end;
    width: 80px;
    height: 80px;
}



input::placeholder {
    color: rgb(34, 58, 103);
}

input:focus {
    outline-color: rgb(34, 58, 103);
}

input:focus::placeholder {
    color: transparent;
}

/*  Login Screen Styles End*/

/* Modal Styles Start */
#modal {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(246, 246, 232, 0.9);
}

#modal_content {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50px;
    aspect-ratio: 16 / 9;
    width: 70%;
    max-height: 90%;
    height: auto;
    transform: translate(-50%, -50%);
}

#modal_close {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 80px;
    min-height: 80px;
    max-width: 120px;
    max-height: 120px;
    width: 6vw;
    height: 6vw;
    transform: translate(50%, -50%);
}



#modal_alphabet {
    position: absolute;
    display: flex;
    height: 10%;
    margin-top: 5%;
    margin-left: 7%;
}

#modal_alphabet>* {
    margin-right: 0.5rem;
    color: lightgray;
    font-size: clamp(1rem, 2vw, 4rem);
}




#modal_img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    bottom: 0;
    right: 0;
}

/* Modal Styles End */
/*Achievements Styles Start*/
#achievements {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(246, 246, 232, 0.9);
}

#achievements_content {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50px;
    aspect-ratio: 16 / 9;
    width: 70%;
    max-height: 90%;
    height: auto;
    transform: translate(-50%, -50%);
    background-color: white;
}

#achievements_close {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 80px;
    min-height: 80px;
    max-width: 120px;
    max-height: 120px;
    width: 6vw;
    height: 6vw;
    transform: translate(50%, -50%);
}



.achievement_row {
    width: 100%;
    display: flex;
    margin-top: 2vh;
    margin-left: 10%;
}

.achievement_text {
    margin-left: 2vw;
    margin-right: 2vw;
    width: 40%;
}

.achievement_unlock_text_title {
    margin-top: 1vh;
}

.achievement_unlock_text_text {
    font-size: clamp(0.5rem, 1.3vw, 2.5vh);
    color: rgb(34, 58, 103);
    font-family: sofia-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 120%;
}

.achievement_number {
    text-align: center;
    line-height: 6vw;
    width: 6vw;
    height: 6vw;
    background-color: rgb(34, 58, 103);
    color: white;
}

.achievement_unlock {
    display: flex;
    align-content: center;
    background-color: rgba(246, 246, 232, 0.9);
    height: 6vw;
    border-radius: 20px;
    width: 30%;
}

.achievement_unlock_text {
    margin-left: 5%;
}

.achievement_img {
    width: 20%;
    margin-left: 5%;
}

/*Achievements Styles Start*/

/*  Main Screen Styles Start*/
main {
    position: absolute;
    width: 90%;
    left: 5%;
    top: 10%;
    height: 80%;
}

#exercise_counter {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    min-width: 80px;
    min-height: 80px;
    max-width: 120px;
    max-height: 120px;
    width: 6vw;
    height: 6vw;
    background-color: rgb(34, 58, 103);
    transform: translate(50%, -50%);
    font-size: 3vw;
    color: white;
}

#exercise_continue {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 80px;
    min-height: 80px;
    max-width: 120px;
    max-height: 120px;
    width: 6vw;
    height: 6vw;
    transform: translate(50%, 50%);
}



#exercise_progress {
    position: absolute;
    right: 10%;
    bottom: top;
    transform: translate(0, -50%);
    display: flex;
    justify-items: flex-end;

}

.exercise_dot {
    height: 5vw;
    width: 5vw;
    background-color: lightgray;
    margin-right: 1vw;
    max-width: 80px;
    max-height: 80px;
}

@media screen and (max-width: 1400px) {
    .exercise_dot {
        height: 3.5vw;
        width: 3.5vw;
        margin-right: 0.75vw;
    }
}


.task_done {
    background-color: rgb(34, 58, 103);
}

/*  Main Screen Styles End*/

/*  Exercise 1 Styles Start*/
#exercise_1 {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

#exercise_1_main {
    gap: 3vh 2vw;
    grid-template-rows: 10% 90%;
}

.altScreen {
    position: absolute;
    display: grid;
    grid-template-columns: 40% 60%;
    height: 100%;
    width: 100%;
}

.altLeft {
    grid-row: 1/1;
    grid-column: 1/1;
}

.altRight {
    grid-row: 1/1;
    grid-column: 2/2;
}


#exercise_1_start_right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#exercise_1_start_text {
    margin-top: 3vh;
}

#exercise_1_end_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#exercise_1_end_right {
    display: flex;
    align-content: center;
}

#exercise_1_end_right_img {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#exercise_1_end_text {
    margin-top: 3vh;
}

#exercise_1_end_grid {
    margin-top: 3vh;
    display: grid;
    gap: 1vw;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
}

.exercise_1_end_grid_item {
    color: rgb(32, 32, 47);
    padding: 1vw;
    text-align: center;
    border-radius: 60px;
}

#exercise_1_title {
    grid-row: 1/1;
    grid-column: 1 / span 2;
}

#exercise_1_title_span {
    color: rgb(170, 169, 23);
}

#exercise_1_left {
    position: relative;
    height: 100%;
    width: 100%;
    grid-row: 2/2;
    grid-column: 1/1;
}

#exercise_1_options {
    position: absolute;
    width: 100%;
    bottom: 10%;
}

#exercise_1_right {
    position: relative;
    height: 100%;
    width: 100%;
    grid-row: 2/2;
    grid-column: 2/2;
}

#exercise_1_answer {
    width: 66.666666%;
    grid-row: 2/2;
    grid-column: 2/2;
}

#exercise_1_img {
    position: absolute;
    right: 0;
    bottom: 10%;
    height: auto;
    width: 80%;
}

@media screen and (max-width: 1400px) {
    #exercise_1_img {
        bottom: 10%;
    }

    #exercise_1_options {
        bottom: 10%;
    }

    #exercise_1_left {
        font-size: 22px;
    }
}

/*  Exercise 1 Styles End*/

/*  Exercise 2 Styles Start*/
#exercise_2 {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

#exercise_2_main {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    gap: 3vh 2vw;
    grid-template-columns: 40% 60%;
    grid-template-rows: 10% 40% 10% 40%;
}

#exercise_2_start {
    display: grid;
    grid-template-columns: 40% 60%;
    height: 100%;
    width: 100%;
}

#exercise_2_start_left {
    width: 100%;
    height: 90%;
    position: absolute;
}

#exercise_2_start_right {
    width: 100%;
    height: 90%;
    position: absolute;
}

#exercise_2_start_text {
    margin-top: 3vh;
}

#exercise_2_start_left_img {
    position: absolute;
    bottom: 0;
    width: 70%;
}

#exercise_2_start_right_img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
}

#exercise_2_end {
    display: grid;
    grid-template-columns: 40% 60%;
    height: 100%;
    width: 100%;
}

#exercise_2_end_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#exercise_2_end_text {
    margin-top: 3vh;

}



#exercise_2_end_right {
    display: flex;
    align-content: center;
    width: 100%;
}

#exercise_2_end_right_img {
    width: 100%;
}

#exercise_2_title {
    grid-row: 1/1;
    grid-column: 1 / span 2;
}

#exercise_2_left {
    grid-row: 2/2;
    grid-column: 1/1;
}

#exercise_2_task {
    margin-bottom: 5vh;
}

#exercise_2_description {
    color: rgb(170, 196, 23);
    font-size: clamp(0.4rem, 1.6vw, 3.5rem);
    display: inline;
}

#exercise_2_trait {
    position: relative;
    display: inline;
    border: none;
    font-size: clamp(0.4rem, 1.6vw, 3.5rem);
    border-radius: 60px;
    padding: 3% 12.5% 3% 12.5%;
    color: #20202F;
    background-color: rgb(170, 210, 221);
    text-align: center;
    margin-left: 10%;
}

#exercise_2_dogs {
    grid-row: 2/2;
    grid-column: 2/2;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 10vw);
    grid-template-rows: repeat(auto-fill, 50%);
    transform: translateY(-5vh);
    gap: 10px;
}

#exercise_2_dogs>* {
    width: 50%;
    align-self: flex-end;
    justify-self: center;
}



.exercise_2_draggable:active {
    cursor: grabbing;
}

#exercise_2_tip {
    grid-row: 3/3;
    grid-column: 1 / span 2;
    display: flex;
    align-items: center;
}



#exercise_2_tip_text {
    width: 70%;
    margin-left: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#exercise_2_containers {
    grid-row: 4/4;
    grid-column: 1 / span 2;
    gap: 0 2vw;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-height: 85%;
    height: auto;
}

.exercise_2_basket {
    background-image: url(assets/images/exercise_2/exercise_2_img_basket.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    position: relative;
    max-height: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.exercise_2_basket>* {
    align-self: flex-end;
    margin-bottom: 2vh;
    justify-self: center;
    max-height: 30%;
    max-width: 30%;
}

.exercise_2_Marker {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    width: 5vw;
    height: 5vw;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}

.correct {
    background-image: url("assets/images/correct.svg");
}

.wrong {
    background-image: url("assets/images/wrong.svg");
}

#exercise_2_buttons {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30%;
    max-height: 55px;
    height: 2.5vw;
    transform: translate(7vw, calc(8vh + 50%));
    display: flex;
    justify-content: space-between;
}

#exercise_2_tip_button {
    width: 30%;
    height: 100%;
    border: none;
    background-color: rgb(222, 165, 131);
    color: white;
    border-radius: 30px;
    font-size: clamp(0.4rem, 1.6vw, 3.5rem);
}


#submitButton {
    width: 60%;
    height: 100%;
    border: none;
    background-color: rgb(222, 165, 131);
    color: white;
    border-radius: 30px;
    font-size: clamp(0.4rem, 1.6vw, 3.5rem);
}

/*  Exercise 2 Styles End*/

/*  Exercise 3 Styles Start*/
#exercise_3 {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;

}

#exercise_3_main {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    gap: 50px 0px;
    grid-template-columns: 50% 50%;
    grid-template-rows: 10% 90%;
}


#exercise_3_title {
    grid-row: 1/1;
    grid-column: 1/2;
}

#exercise_3_left {
    height: 100%;
    width: 70%;
    grid-row: 2/2;
    grid-column: 1/1;
}

#exercise_3_start_text {
    margin-top: 3vh;
}

#exercise_3_start_right {
    display: flex;
    align-content: center;
    width: 100%;
}

#exercise_3_start_right_img {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#exercise_3_right {
    justify-self: flex-end;
    height: 100%;
    width: 70%;
    grid-row: 2/2;
    grid-column: 2/2;
}

#exercise_3_left_options,
#exercise_3_right_options {
    margin-top: 7.5vh;
}

#exercise_3_img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    width: 50%;
    max-width: 20vw;
    max-height: 25vh;
}

@media screen and (max-width: 1400px) {
    #exercise_3_img {
        max-height: 20vh;
    }
}

@media screen and (max-width: 700px) {
    #exercise_3_img {
        max-width: 30%;
    }
}

#exercise_3_right_answer {
    margin-top: 5vh;
}

#exercise_3_left_answer {
    margin-top: 5vh;
}

#exercise_3_end_left {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#exercise_3_end_right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

#exercise_3_end_right_img {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#exercise_3_end_text {
    margin-top: 3vh;
}

/*  Exercise 3 Styles End*/

/*  Exercise 4 Styles Start*/
#exercise_4 {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

#exercise_4_start_text {
    margin-top: 3vh;
}

#exercise_4_start_right {
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
}

#exercise_4_start_right_img {
    width: 70%;
}

#exercise_4_main {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    gap: 3vh 0px;
    grid-template-columns: 30% 70%;
    grid-template-rows: 10% 90%;
}

#exercise_4_title {
    grid-row: 1/1;
    grid-column: 1/2;
}

#exercise_4_left {
    position: relative;
    height: 100%;
    width: 100%;
    grid-row: 2/2;
    grid-column: 1/1;
}

#exercise_4_left_target_dog {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
}

#exercise_4_left_question {
    color: rgb(34, 58, 103);
}

#exercise_4_right {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-self: flex-end;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    left: 5%;
    height: 100%;

    grid-row: 2/2;
    grid-column: 2/2;
}

#exercise_4_right_parents {
    position: relative;
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;

}

#exercise_4_right_parents_text {
    position: absolute;
    bottom: 0;
    transform: translateY(3vh);
    color: rgb(86, 165, 188);
}

#exercise_4_right_selection {
    position: relative;
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.exercise_4_dog {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.exercise_4_dog_fix {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
}





.exercise_4_big_circle {
    position: absolute;
    background-color: rgb(170, 210, 221);
    width: 70%;
    left: 15%;
    height: 30%;
    bottom: 0;
}

.exercise_4_small_circle {
    position: absolute;
    background-color: rgb(170, 210, 221);
    width: 70%;
    left: 15%;
    height: 20%;
    bottom: 0;
}

.exercise_4_dog_svg {
    width: 70%;
    height: auto;
    position: absolute;
    bottom: 5%;
}

.exercise_4_parent_svg {
    position: absolute;
    width: 100%;
    height: auto;
    max-height: 100%;
    bottom: 0;
    transform: translateY(-2vh);
}


#exercise_4_end_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#exercise_4_end_text {
    margin-top: 3vh;
}

#exercise_4_end_right {
    display: flex;
    justify-content: center;
    align-content: center;

}

#exercise_4_end_right_img {
    width: 70%;
}

/*  Exercise 4 Styles End*/


/*  Video Styles Start*/

#video_Screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    width: 100%;
    height: 100%;
    display: block;
}

video {
    width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#video_Choices {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 44%;
    right: 26.5%;
}

#video_Choices>* {
    width: 18vw;
    height: 4vw;
    border: none;
    margin-bottom: 1vw;
    border-radius: 40px;
    font-size: clamp(0.4rem, 1.6vw, 3.5rem);
}

#video_Button_yes {
    color: rgb(32, 32, 47);
    background-color: #CCCB74;

}

#video_Button_no {
    color: rgb(32, 32, 47);
    background-color: #C8AC9D;
}



/*HOVERS*/

@media(hover: hover) and (pointer: fine) {

    .unknownAnswer:hover {
        cursor: pointer;
        background-color: rgb(34, 58, 103);
        color: white;
    }

    .hitbox:hover {
        cursor: pointer;
    }

    nav *:hover {
        cursor: pointer;
    }

    #login_continue:hover {
        cursor: pointer;
        box-shadow: 2px 2px 1px black;
    }

    #modal_close:hover {
        cursor: pointer;
    }

    #modal_alphabet>*:hover {
        cursor: pointer;
        color: rgb(34, 58, 103) !important;
    }

    #achievements_close:hover {
        cursor: pointer;
    }

    #exercise_continue:hover {
        cursor: pointer;
        box-shadow: 2px 2px 1px black;
    }

    #video_Button_yes:hover {
        cursor: pointer;
        border: 2px solid black;
    }

    #video_Button_no:hover {
        cursor: pointer;
        border: 2px solid black;
    }

    .exercise_4_dog:hover .exercise_4_small_circle {
        background-color: #56A5BC;
    }

    .exercise_4_dog:hover {
        cursor: pointer;
    }

    #exercise_2_tip_button:hover,
    #submitButton:hover {
        cursor: pointer;
        border: 2px solid rgb(222, 165, 131);
        background-color: white;
        color: rgb(222, 165, 131);
    }

    .exercise_2_draggable:hover {
        cursor: grab;
    }
}