/* Overskrifter */
h1{
    font-size: 45pt;
    font-family: 'kanit';
    font-weight: 600;
    letter-spacing: 1pt;
    line-height: 44pt;
    margin-bottom: 3vh;
}
.h1_quiz_start{
    width: 50%;
    text-align: center;
    line-height: 60pt;
}
.h1_vælg{
    width: 65vw;
    line-height: 55pt;
    text-align: center;
    position: absolute;
    top: 6vh;
}

p{
    font-size: 20pt;
    font-family: 'Kaisei Opti';
}
/*tekst*/
.p_kropsideal_v1{
    position: absolute;
    left: -10%;
    top: 15%;
    opacity: 0;

    transition: 1.5s ease-in;

}
.p_kropsideal_v2{
    position: absolute;
    left: -10%;
    top: 65%;
    opacity: 0;

    transition: 1.5s ease-in;
}
.p_kropsideal_v3{
    position: absolute;
    left: -10%;
    top: 85%;
    opacity: 0;

    transition: 1.5s ease-in;
}
.p_kropsideal_h1{
    position: absolute;
    right: -10%;
    top: 12%;
    opacity: 0;

    transition: 1.5s ease-in;
}
.p_kropsideal_h2{
    position: absolute;
    right: -10%;
    top: 53%;
    opacity: 0;

    transition: 1.5s ease-in;
}
.p_kropsideal_h3{
    position: absolute;
    right: -10%;
    top: 79%;
    opacity: 0;

    transition: 1.5s ease-in;
}
.kilde{
    font-style: italic;
    color: rgb(108, 108, 108) !important;
}


/* forside */
.sec_forside{
    background-color: #A62A2A;
    color: #EACCCC;
    justify-content: flex-start;
    padding-top: 10vh;
    height: 90vh;
}
.div_kroppe{
    display: flex;
    width: 73vw;
    justify-content: space-evenly;
    margin: 1vw 0 3vw;
    z-index: 1;
}
.div_kroppe img{
    height: 25vw;
    transition: 1s ease-in-out;
}
.div_knapper{
    display: flex;
    width: 70vw;
    justify-content: space-evenly;
}
.div_knapper img{
    width: 12vw;
}

.forside_1950{
    display: none;
}
.forside_2000{
    display: none;
}


/* vælg side */
.sec_vælg{
    background-color: #EACCCC;
    color: #A62A2A;
    padding-top: 10vh;
}

/* lyd */
audio{
    display: none;
}


/* --- --- Baggrunde samt tekstfarve (for at de kan blive specifikke på hvert årstal) --- --- */
/* sek 1 */
.sektion_1700{
    background-color: #829172;
}
.sektion_1700 h1{
    color: #DFE7DA;
    margin-bottom: 4vw;
}
.sektion_1700 p{
    font-size: 20pt;
}



.sektion_1950{
    background-color: #5F84A1;
}
.sektion_1950 h1{
    color: #DBECF4;
    margin-bottom: 4vw;
}
.sektion_1950 p{
    font-size: 20pt;
}


.sektion_2000{
    background-color: #FF8427;
}
.sektion_2000 p{
    font-size: 20pt;
}
.sektion_2000 h1{
    color: #FFDCC0;
}



/* sek 2*/
.sektion_fact1_1700{
    color: #829172;
}
.sektion_fact1_1950{
    color: #5F84A1;
}

.sektion_fact1_2000{
    color: #FF8427;
}

/* sek 3*/
.sektion_fact2_1700{
    background-color: #DFE7DA;
    color: #829172;
}
.sektion_fact2_1950{
    background-color: #DBECF4;
    color: #5F84A1;
}
.sektion_fact2_2000{
    background-color: #FFDCC0;
    color: #FF8427;
}



/* sek 4*/
.sektion_fact3_1700{
    background-color: #829172;
}
.sektion_fact3_1950{
    background-color: #5F84A1;
    color: #ffffff;
}
.sektion_fact3_2000{
    background-color: #FF8427;
    color: #ffffff;
}
/* sek 5 */
.sektion_quiz_start_1700{
    background-image: url(img/baggrund_quiz1700.jpg);
    color: #829172;
}
.sektion_quiz_start_1950{
    background-image: url(img/baggrund_quiz1950.jpg);
    color: #5F84A1;
}
.sektion_quiz_start_2000{
    background-image: url(img/baggrund_quiz2000.jpg);
    color: #FF8427;
}


/* sek 6-8 */
.sektion_quiz_1700 h1{
    color: #829172;
    font-size: 30pt;
}
.sektion_quiz_1950 h1{
    color: #5F84A1;
    font-size: 40pt;
}
.sektion_quiz_2000 h1{
    color: #FF8427;
    font-size: 25pt;
    width: 80vw;
    text-align: center;
}
.sektion_quiz_2000 p{
    font-size: 18pt;
}

/* sek 9 */
.sektion_quiz_slut_1700{
    background-color: #829172;
}
.sektion_quiz_slut_1700 h1{
    color: #ffffff;
    font-size: 55pt;
}
.sektion_quiz_slut_1700 p{
    width: 63vw;
    font-size: 18pt;
    line-height: 40pt;
    margin-top: 2vh;
    text-align: center;
}

.sektion_quiz_slut_1950{
    background-color: #5F84A1;
}
.sektion_quiz_slut_1950 h1{
    color: #ffffff;
    font-size: 55pt;
}
.sektion_quiz_slut_1950 p{
    width: 63vw;
    font-size: 18pt;
    line-height: 40pt;
    margin-top: 2vh;
    text-align: center;
}

.sektion_quiz_slut_2000{
    background-color: #FF8427;
}
.sektion_quiz_slut_2000 h1{
    color: #ffffff;
    font-size: 55pt;
}
.sektion_quiz_slut_2000 p{
    width: 63vw;
    font-size: 18pt;
    line-height: 40pt;
    margin-top: 2vh;
    text-align: center;
}






section{
    width: 100%;
    height: 100vh;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    animation-duration:2s; 
    animation-fill-mode: forwards;
}

.container_tekstIllustrationer{
    display: flex;
    flex-wrap: wrap;
    width: 63vw;
    justify-content: space-between;
    align-items: center;
}
.container_tekstIllustrationer img{
    width: 13vw;
    height: fit-content;

}
#illustration_hjerte{
    width: 15vw;
}
.container_tekstIllustrationer p{
    width: 45vw;
    line-height: 35pt;
    font-size: 18pt;
}
/* spec for fact 3*/
.container_tekstIllustrationer_fact3{
    display: flex;
    width: 70vw;
    justify-content: space-between;
    align-items: center;
}
.container_tekstIllustrationer_fact3 img{
    width: 15vw;
    height: fit-content;

}
.container_tekstIllustrationer_fact3 p{
    width: 45vw;
    line-height: 30pt;
    font-size: 18pt;
}

/* spec for 2000 */
.container_tekstIllustrationer_1950{
    display: flex;
    flex-wrap: wrap;
    width: 67vw;
    justify-content: space-between;
    align-items: center;
}
.container_tekstIllustrationer_1950 img{
    width: 8vw;
    height: fit-content;
}
.container_tekstIllustrationer_1950 p{
    width: 55vw;
    font-size: 18pt;
    line-height: 40pt;
    color: #5F84A1;
}

.container_tekstIllustrationer_2000{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.container_tekstIllustrationer_2000 img{
    width: 17vw;
    margin-bottom: 5vh;
    height: fit-content;
    position: absolute;
    right: 25%;
    top: 15%;
}
.container_tekstIllustrationer_2000 p{
    width: 60vw;
    line-height: 40pt;
    margin-top: 15vh;
}





.p_h1_fact1{
    animation-duration: 5s;
    animation-fill-mode: forwards;
    font-family: 'kanit';
    display: flex;
    width: 50vw;
}
.p_h1_fact2{
    animation-duration: 5s;
    animation-fill-mode: forwards;
    font-family: 'kanit';
}
.container_tekstIllustrationer .fact2_p{
    width: 43vw;
}

@keyframes grow{
    from {font-size: 22pt;}
    to {font-size: 50pt;}
}
  .p_h1_fact3{
    animation-duration: 5s;
    animation-fill-mode: forwards;
    font-family: 'kanit';
    line-height: 50pt;
    display: flex;
    width: 49vw;
}
.container_tekstIllustrationer .fact3_p{
    color: #ffffff;
    width: 100%;
}

#img_fact3{
    position: absolute;
    bottom: 18%;
    right: 24vw;
    width: 20vw;
}



/* Sektioner hvor der bruges id til funktionerne - kun den styling der er ens for alle årstallende */

#kropsideal{
    z-index: 1000;
    color: #ffffff;
    justify-content: flex-start;
    padding-top: 10vh;
    height: 90vh;
}
.img_kropsideal{
    height: 30vw;
}
@keyframes rotateAnimation {
    0%   {transform: rotate(0deg);}
    25%  {transform: rotate(3deg);}
    50%  {transform: rotate(0deg);;}
    75%  {transform: rotate(-3deg);}
    100% {transform: rotate(0deg);}
  }

  /* pop up vindue */
#container_popup{
    background-color: #ffffff;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vw;
    top: 7vh;

    display: none;
}

#container_popup img{
    width: 37vw;
}
#container_popup #popup_kryds{
    width: 2vw;
    position: absolute;
    right: -5vw;
    top: 0vw;
}

#container_popup p{
    font-size: 10pt;
    color: black;
    align-self: baseline;
    margin-top: 1vw;
}
#container_popup .popup_tekst{
    font-size: 10pt;
    color: black;
    align-self: baseline;
    margin-top: 2vh;
    padding-top: 1vh;
    border-top: 1px solid #829172;
    width: 100%;
}

/* pile på første sektion */
.pil_v1{
    position: absolute;
    top: 29%;
    left: 32%;
    width: 10vw
}
.pil_v2{
    position: absolute;
    top: 52%;
    left: 26%;
    width: 15vw
}
.pil_v3{
    position: absolute;
    top: 69%;
    left: 37%;
    width: 8vw
}

.pil_h1{
    position: absolute;
    top: 24%;
    right: 32%;
    width: 10vw
}
.pil_h2{
    position: absolute;
    top: 48%;
    right: 24%;
    width: 14vw
}
.pil_h3{
    position: absolute;
    top: 75%;
    right: 28%;
    width: 13vw
}


.pil_v1_1950{
    position: absolute;
    top: 29%;
    left: 35%;
    width: 9vw
}
.pil_v2_1950{
    position: absolute;
    top: 52%;
    left: 30.5%;
    width: 12vw
}
.pil_v3_1950{
    position: absolute;
    top: 70%;
    left: 36%;
    width: 7vw
}

.pil_h1_1950{
    position: absolute;
    top: 24%;
    right: 32%;
    width: 10vw
}
.pil_h2_1950{
    position: absolute;
    top: 48%;
    right: 22%;
    width: 18vw
}
.pil_h3_1950{
    position: absolute;
    top: 79%;
    right: 33%;
    width: 12vw
}

.pil_v1_2000{
    position: absolute;
    top: 28%;
    left: 32.5%;
    width: 10vw
}
.pil_v2_2000{
    position: absolute;
    top: 52%;
    left: 28%;
    width: 14vw
}
.pil_v3_2000{
    position: absolute;
    top: 69%;
    left: 38%;
    width: 8vw
}

.pil_h1_2000{
    position: absolute;
    top: 24%;
    right: 35%;
    width: 8vw
}
.pil_h2_2000{
    position: absolute;
    top: 48%;
    right: 23%;
    width: 17vw
}
.pil_h3_2000{
    position: absolute;
    top: 75%;
    right: 26%;
    width: 14vw
}





/* styling til fact 2 */
#container_popupF1{
    background-color: #ffffff;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vw;
    margin: auto;
    backdrop-filter: blur(10px);

    display: none;
}

#container_popupF1 img{
    width: 32vw;
}
.citat_img{
    width: 66vw !important;
}
#container_popupF1 #popup_krydsF1{
    width: 2vw;
    position: absolute;
    right: -5vw;
    top: 0vw;
}

#container_popupF1 p{
    font-size: 10pt;
    color: black;
    align-self: baseline;
    margin-top: 1vw;
}
#container_popupF1 .popup_tekst{
    font-size: 10pt;
    color: black;
    align-self: baseline;
    margin-top: 2vh;
    padding-top: 1vh;
    border-top: 1px solid #829172;
    width: 100%;
}

/* styling til fact 3 */
#container_popupVideo{
    background-color: #ffffff;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vw;
    margin: auto;
    backdrop-filter: blur(10px);

    display: none;
}

#container_popupVideo img{
    width: 62vw;
}
.video{
    width: 45vw;
    height: 35vw;
}

#container_popupVideo #popup_krydsVideo{
    width: 2vw;
    position: absolute;
    right: -5vw;
    top: 0vw;
}

#container_popupVideo p{
    font-size: 10pt;
    color: black;
    align-self: baseline;
    margin-top: 1vw;
}
#container_popupVideo .popup_tekst{
    font-size: 10pt;
    color: black;
    align-self: baseline;
    margin-top: 2vh;
    padding-top: 1vh;
    border-top: 1px solid #829172;
    width: 100%;
}




#fact1{
    background-image: url(img/baggrund_figur.jpg);
    background-size: 100%;
    z-index: 900;
}
#fact2{
    z-index: 800;
}
#fact3{
    z-index: 700;
    color: #ffffff;
}

#quizStart{
    background-size: 100%;
    z-index: 600;
}
#quiz1{
    background-image: url(img/baggrund_quiz.jpg);
    background-size: 100%;
    z-index: 500;
}
#quiz2{
    background-image: url(img/baggrund_quiz.jpg);
    background-size: 100%;
    z-index: 400;
}
#quiz3{
    background-image: url(img/baggrund_quiz.jpg);
    background-size: 100%;
    z-index: 300;
}

#quizSlut{
    z-index: 200;
    color: #ffffff;
}

@keyframes slideNext{
    from{top:0%}
    to{top:-100%}
}


/* --- quiz --- */
.container_q_1700{
    display: flex;
    width: 50vw;
    border: 2px solid #829172;
    color: #829172;
    border-radius: 15px;
    margin: 3vh;
    padding: 1vw;
    align-items: center;
}
.container_q_1950{
    display: flex;
    width: 40vw;
    border: 2px solid #5F84A1;
    color: #5F84A1;
    border-radius: 15px;
    margin: 3vh;
    padding: 1vw;
    align-items: center;
}
.container_q_2000{
    display: flex;
    width: 56vw;
    border: 2px solid #FF8427;
    color: #FF8427;
    border-radius: 15px;
    margin: 3vh;
    padding: 1vw;
    align-items: center;
}


.container_q p{
    font-family: 'kanit';
    font-weight: 300;
}

.answer_1700{
    border: 2px solid #829172;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    width: 2.5vw;
    padding-bottom: 0.5vw;
    margin-right: 1vw;
}
.answer_1950{
    border: 2px solid #5F84A1;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    width: 2.5vw;
    padding-bottom: 0.5vw;
    margin-right: 1vw;
}
.answer_2000{
    border: 2px solid #FF8427;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    width: 2.5vw;
    padding-bottom: 0.5vw;
    margin-right: 1vw;
}



.q_breadcrumbs_1700{
    font-family: 'kanit';
    position: absolute;
    top: 5vh;
    left: 50%;
    font-size: 14pt;
    color: #829172;
}
.q_breadcrumbs_1950{
    font-family: 'kanit';
    position: absolute;
    top: 5vh;
    left: 50%;
    font-size: 14pt;
    color: #5F84A1;
}
.q_breadcrumbs_2000{
    font-family: 'kanit';
    position: absolute;
    top: 5vh;
    left: 50%;
    font-size: 14pt;
    color: #FF8427;
}

.container_q_btn{
    display: flex;
    justify-content: space-between;
}




/* --- Knapper --- */

button{
    text-transform: uppercase;
    font-size: 20pt;
    font-family: 'kanit';
    color: white;
    background-color: transparent;
    border: 3px solid white;
    border-radius: 5pt;
    padding: 3pt 7pt;

    position: absolute;
    bottom: 3vw;
    right: 3vw;
    z-index: 100000;
}
.btn_blue{
    color: #5F84A1;
    border: 3px solid #5F84A1;
}
.btn_green{
    color: #829172;
    border: 3px solid #829172;
}
.btn_orange{
    color: #FF8427;
    border: 3px solid #FF8427;
}


.btn_quiz_green{
    color: #829172;
    border: 3px solid #829172;
    right: unset;
    bottom: unset;
    position: relative;
    margin-top: 3vh;
    margin-right: 2vw;
}
.btn_quiz_blue{
    color: #5F84A1;
    border: 3px solid #5F84A1;
    right: unset;
    bottom: unset;
    position: relative;
    margin-top: 3vh;
    margin-right: 2vw;

}
.btn_quiz_orange{
    color: #FF8427;
    border: 3px solid #FF8427;
    right: unset;
    bottom: unset;
    position: relative;
    margin-top: 3vh;
    margin-right: 2vw;

}
.btn_quiz_hvid{
    color: #ffffff;
    border: 3px solid #ffffff;
    right: unset;
    bottom: unset;
    position: relative;
    margin-top: 3vh;
}



#videre6{
    display: none;
}
#videre7{
    display: none;
}
#videre8{
    display: none;
}



.knap_hjem{
    position: absolute;
    left: 2vw;
    top: 2vw;
    width: 3vw;

    transition: 3s ease-in;
}


/* -- -- Interaktive ikoner -- -- */
#dk{
    position: absolute;
    width: 4vw;
    z-index: 10000;
    right: 2vw;
    top: 1.9vw;
}
#eng{
    position: absolute;
    width: 4vw;
    z-index: 10000;
    right: 2vw;
    top: 2vw;
}

.eye{
    transition: 0.5s;
    width: 6.5vw;
}
.blink{
    transition: 0.5s;
    width: 6.5vw;
    display: none;
}
.kropsideal_øje{
    position: absolute;
    right: 30%;
    bottom: 30%;
}
.eye_center_bottom{
    position: absolute;
    bottom: 8%;
    left: 50%;
}
.eye_center_top{
    position: absolute;
    top: 8%;
    left: 46%;
}

.lyd_ikon{
    position: absolute;
    left: 45%;
    top: 3%;
    width: 8vw;
}
.lyd_p{
    position: absolute;
    font-size: 14pt;
    font-family: 'kanit';
    font-weight: 300;
    left: 53%;
    top: 9.5%;

    transition: 2s;
    opacity: 0;
}

.citat{
    animation: citatGrow 14s infinite;
}
@keyframes citatGrow {
    0%   {width: 5vw;}
    10%  {width: 6vw;;}
    20%  {width: 5vw;}
    30%  {width: 6vw;}
    40%  {width: 5vw;}
    50%  {width: 6vw;;}
    60%  {width: 5vw;}
    70%  {width: 6vw;}
    80%  {width: 5vw;;}
    90%  {width: 6vw;}
    100% {width: 5vw;}


}




