* {
    box-sizing: border-box;
}

:root{
    --color-background:#fefff1;
    --color-background-secundair:#433a00;
    --color-text:#433a00;
    --color-border:#433a00;
    --color-text-secondair:#fefff1;
    --color-border-secundair:#fefff1;
    /* --letter-width:11.45vw; */
}

/* @media ( width > 25em){
    :root{
        --letter-width:9.45vw;
    }
} */

body{
    background-color: var(--color-background);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 200;
    margin: 0;
    padding: 0;
}

section{
    height: 100vh;
}

h1, h2, h3{
    text-transform: uppercase;
    color: var(--color-text);
    
}
h2, h3{
    font-weight: 200;
    text-align: left;

}

p{
    color: var(--color-text); 
}



.linkWeb {
    display: flex;
}

.linkWeb a{
    display:block;
    padding:.5em 2em;

    border-radius: 2em;
    background-color: var(--color-background-secundair);

    text-decoration: none;
    color: var(--color-text-secondair);
}

.linkWeb a:hover{
    text-decoration: underline;
}
@media (width > 40em){
    .linkWeb a{
        font-size: 1.15em;
    }


}





/* 1e section */

section:first-of-type{
    display: grid;
    place-items: center;
    background-color: var(--color-background-secundair);
}

section:first-of-type div{
    width: 80%;
    height: 32em;

    display:flex;
    flex-direction:column;
    
    background-image: url("img/mountains-telefoon.jpg");
    background-size: cover;   
    border: .2em solid var(--color-border-secundair);
}

section:first-of-type h1,
section:first-of-type h2, 
section:first-of-type h3 {
    text-align: center;
}
section:first-of-type h1{
    margin: 1em 0 .2em 0;
}
section:first-of-type h2{
    margin: 0;
}

section:first-of-type p{
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text);
}

section:first-of-type p:first-of-type{
    margin-top: .3em;
}

section:first-of-type p:nth-of-type(2){
    margin: auto .7em .7em;
    color: var(--color-text-secondair);
}

@media ( width > 25em){
    section:first-of-type div{
        width: 23em;
        aspect-ratio:24/16;
        height:unset;
        background-image: url("img/mountains.JPG");
    }

    section:first-of-type p:nth-of-type(2){
        max-width: 39ch;
        align-self: center;
    }
}

@media ( width > 40em){
    section:first-of-type div{
        width: 35em;
    }

    section:first-of-type p:nth-of-type(2){
        max-width: none;
    }
}

@media ( width > 60em){
    section:first-of-type div {
        width: 45em;
    }
}



/* 2e section */

section:nth-of-type(2){
    display: flex;
    align-items: center;
    justify-content: center;
}

section:nth-of-type(2) div{
    width:min(80%, 40em);
    border: .2em solid var(--color-border);
    padding: 1em;
}

@media ( width > 60em){
    section:nth-of-type(2) div {
        padding: 3em;
    }   
}



/* 3e section */

section:nth-of-type(3){
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: var(--color-background-secundair);
}

section:nth-of-type(3) h3{
    text-align: center;
    color: var(--color-text-secondair);
}

section:nth-of-type(3) h3 div{
    transition: .3s;
}

section:nth-of-type(3) h3:first-of-type:hover div{
    scale:1 -1;
}

section:nth-of-type(3) h3:nth-of-type(2){
    order: 1;
}

section:nth-of-type(3) div{
    display: grid;
    justify-items:center;
    gap: 1.5em;
    border: .2em var(--color-border);
    
}

section:nth-of-type(3) img{
    width: 80%;
    border: .2em solid var(--color-border-secundair);
}

section:nth-of-type(3) img:first-of-type{
    rotate: x 180deg;
}



@media ( width > 25em){
    section:nth-of-type(3) h3:first-of-type {
        align-self: end;
    }
    section:nth-of-type(3) h3:nth-of-type(2){
        align-self: start;
    }

    section:nth-of-type(3) img{
        width: 60%;
    }
    section:nth-of-type(3) div{
        gap: 2em;
    }
}

@media ( width > 40em){
    section:nth-of-type(3) img {
        width: 40%;
    } 
    section:nth-of-type(3) div {
        display: flex;
        justify-content:center;
    } 

    section:nth-of-type(3) img:first-of-type{
        rotate: z 180deg;
    }
}

@media ( width > 60em){  
    section:nth-of-type(3) img {
        width: 30%;
    }
    section:nth-of-type(3) div{
        gap: 3em;
    }
}



/* 4e section */

section:nth-of-type(4){
    display:flex;
    justify-content: center;
    align-items: center;
}

section:nth-of-type(4) div{
    display: grid;
    grid-template-columns: calc(40% - .5em) calc(40% - .5em);
    place-content:center;
    gap: 1em;
}
section:nth-of-type(4) img{
    width: 100%;
}
section:nth-of-type(4) img:first-of-type, section:nth-of-type(4) img:nth-of-type(3){
    justify-self: end;
}

@media ( width > 25em){
    section:nth-of-type(4) div{
        grid-template-columns: 40% 40%;
    }   
}

@media ( width > 40em){
    section:nth-of-type(4) div {
        gap:2em;
    }
}

@media ( width > 60em){  
    section:nth-of-type(4) div {
        gap:3em;
    }
}



/* 5e section */


section:nth-of-type(5){
    height: 200vh;
    display: grid;
    grid-template-rows: 1fr 1fr;
    place-items:center;
}
section:nth-of-type(5) > div {
    width:80%;
    max-width:40em;
}

section:nth-of-type(5) article{
    display: flex;
    gap: .4em;
    height: var(--letter-width);
}

section:nth-of-type(5) video{
    width: 70%;
    border: var(--color-border) solid .2em;
    max-width:15em;
    order: -1;
}




@media ( width > 60em){  
    section:nth-of-type(5) {
        height: 100vh;
        grid-template-columns:1fr 1fr;
        grid-template-rows: 1fr;
    }
}





/* 6e section */

section:nth-of-type(6){
    height: 200vh;
    
    display: grid;
    grid-template-rows:1fr 1fr;
    place-items:center;
}

section:nth-of-type(6) > div {
    width:80%;
}

section:nth-of-type(6) h2 {
    margin: 0;
    align-self: center;
}
section:nth-of-type(6) h3{
    margin: 0 0 1em;
}

section:nth-of-type(6) img{
    width: 50%;
}


@media ( width > 25em){
    section:nth-of-type(6) div{
        width: 70%;
    }

    section:nth-of-type(6) h3{
        margin-bottom: 3em;
    }

    section:nth-of-type(6) img{
        width: 40%;
        max-width:11.11em;
    }
}

@media ( width > 60em){  
    section:nth-of-type(6){
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:1fr;
    }
}



/* 7e section */
section:nth-of-type(7){
    height: 200vh;
    display: grid;
    grid-template-rows:1fr 1fr;
    place-items: center; /* uitzoeken wat het verschi is tussen content en items */
}

/* tekst */
section:nth-of-type(7) div:nth-of-type(1){
    width: 90vw;
    margin: 0 .8em 0 .8em;
    justify-self: center;
    align-self: center;
}

/* plaatjes */
section:nth-of-type(7) div:nth-of-type(2) {
    display:grid;
    align-content:center;
    justify-items:center;
    gap:1em;

    order:-1;
}

section:nth-of-type(7) div:nth-of-type(2) > img {
    width: 70%;
}

section:nth-of-type(7) cyclus {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(3, min(14vw, 6em));
    place-items: center;
    max-width:42em;
}

section:nth-of-type(7) cyclus img{
    width:100%;
    border: .2em solid var(--color-border);    
}

section:nth-of-type(7) cyclus img:first-of-type{
    grid-row: 1/4;
    grid-column: 3 / 6;
    align-self: start;
}
section:nth-of-type(7) cyclus img:nth-of-type(2){
    grid-row: 1 / 4;
    grid-column: 5 / 8;

    align-self: center;
}
section:nth-of-type(7) cyclus img:nth-of-type(3){
    grid-row: 1/4;
    grid-column: 7 / 10;
    align-self: end;

    z-index: 1;
}
section:nth-of-type(7) cyclus img:nth-of-type(4){
    grid-row: 1 / 4;
    grid-column: 9 / 12;

    align-self: center;
}

@media ( width > 25em){
    /* tekst */
    section:nth-of-type(7) div:nth-of-type(1) {
        width: 75%;
        max-width:40em;
    }

    /* plaatjes */
    section:nth-of-type(7) div:nth-of-type(2) > img {
        width: 19em;
    }
}

@media ( width > 60em){  
    section:nth-of-type(7){
        height: 100vh;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    section:nth-of-type(7) cyclus {
        grid-template-rows: repeat(3, min(7vw, 6em));
    }
}






/* 8e section */

section:nth-of-type(8){
    height: 200vh;
    display: grid;
    grid-template-rows: 1fr 1fr;
    place-items:center;
}

section:nth-of-type(8) > div{
    width: 80%;
}

section:nth-of-type(8) video{
    width: 80%;
    border: .2em solid var(--color-border);
    max-width:40em;
}

@media ( width > 60em){     
    section:nth-of-type(8){
        height: 100vh;
        grid-template-columns: 6fr 4fr;
        grid-template-rows: 1fr;
    }
    section:nth-of-type(8) video {
        width: 70%;
    }

    section:nth-of-type(8) > div{
        max-width:40em;
    }
}







/* 9e section */

section:nth-of-type(9){
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background-secundair);
}

section:nth-of-type(9) h2{
    order: -10;
    color: var(--color-text-secondair);
}

section:nth-of-type(9) p{
    text-align: justify;
    width: min(80%, 24rem);
    color: var(--color-text-secondair);
}

#imgIris{
    width: min(80%, 24rem);
    border: .2em solid var(--color-border-secundair);
    order: -5;
}

/* links */
section:nth-of-type(9) div{
    display: flex;
    gap: 1em;
    margin-top: 2em;
}

section:nth-of-type(9) div a{
    display: grid;
}

section:nth-of-type(9) div a img{
    width: 2em;
    align-self: center;
}

@media ( width > 60em){
    p {
        font-size: 1.15em;
    }
}