/**************/
/* section 1*/
/**************/

main section:nth-of-type(1){
    background-image: var(--background-img-main);
    display: grid;
    /* hier heb ik een extra rij toegevoegd om de h1 wat te laten uitsteken */
    grid-template-rows: 
        1fr /* de video en de h1 */
        1em /* de h1 */
        max-content /* wondr*/ 
        5em/* witruimte tot volgende section */
        max-content /* de p */
        5em; /* witruimte tot volgende section */
    grid-template-columns:calc(40% - 4em) 1fr;
    position: relative;
}
/* h1 styling*/
section h1 {
    font-family: "chaney-wide";
    z-index: 1;
    /* in rij 1 en 2 */
    grid-row:1/3;
    grid-column:2/-1;
    /* onder in de cel */
    align-self:end;
    display: grid;

}

section h1 strong:nth-of-type(1) {
    background-color: var(--color-background-purple);
    color: var(--color-white);
    /* max-width: fit-content; niet nodig */
    /* max-height: fit-content; niet nodig */
    font-size: medium; /* ouderwets - beter om em te gebruiken */
    /* display: flex; */
    /* display: inline-block; niet nodig */
    /* grid-row:2/3; niet nodig */
    /* grid-row-end:3; */

    /* grid-column:1/2; niet nodig */
    /* grid-column-end:3; */

    justify-self: start; /* wel nodig */
}


section h1 strong:nth-of-type(2) {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: "parking-regular";
    font-weight: lighter; /* ouderwets - beter een specifieke weight te gebruiken */
    font-size: larger; /* ouderwets - beter om em te gebruiken */
    /* display: inline-block; niet nodig */
    /* display: flex; */
    /* grid-row:3/4; niet nodig */


    /* grid-column:1/2; niet nodig */
    justify-self: start; /* wel nodig */
}

/* een > toegevoegd in de selector */
/* anders wordt de img in de button ook geselecteerd */
main section:nth-of-type(1) > img {
    width: 85%;
    /* translate: ; */
    grid-row-start:3; /* ipv -1 */
    /* grid-row-end:2; default 4 */

    /* grid-column-start:1; */
    /* grid-column-end:3; */
    grid-column:1/-1; /* hele breedte */
    justify-self: center;
}



 /* bij de video hoort er ook een @media (prefers-reduced-motion: no-preference), zodat de video uit gaat als iemand reduce motion aan heeft  */
/* video gecompressed om het op github te uploaden */
/* (https://www.freeconvert.com/video-compressor) */
section:nth-of-type(1) video {
    grid-column:1/-1;
    grid-row:1/2;
    
    /* width: 100dvw; */
    /* in dit geval beter dan 100dvw - de video is dan altijd even breed als de div */
    width:100%;
    height: auto;
    /* position: relative; niet nodig */

    display:block; /* om het kleine beetje witruimte onder de video weg te halen */ 
}

main section:nth-of-type(1) button {
    appearance: none;
  
    /* zo is het beter denk ik */

    grid-column:2/-1;
    grid-row:1/2;
    justify-self: end;
    margin:1em;

    width: 4em;
    height: 4em;

    background-color: var(--color-background-pink-purple);
    border-radius: 12%;
    opacity: 0.8;

    /* om de img in het midden van de button te positioneren */
    display:grid;
    place-items:center;
}

main section:nth-of-type(1) button img {
    width:2.5em;
    height:auto;
}


main section:nth-of-type(1) p {
    font-family: "archia-regular";
    text-align: center;
    width: 65%;
    max-width:32em; /* niet breder dan 32 em */
    /* grid-column: 2/3; */
    grid-column:1/-1; /* hele breedte volgens mij */
    grid-row:5/6;
    justify-self: center; /* in het midden van de 2 kolommen */
    line-height: 160%;
    font-size: large; /* dat is ouderwets - beter om em te gebruiken */
    color: var(--color-p);
}




main section h2 strong:nth-of-type(1) {
    background-color: var(--color-background-purple);
    color: var(--color-white);
    text-align: center;
}


main section:nth-of-type(1)>button:last-of-type ul:nth-of-type(1){
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    translate: 100% 0;
    transition: 0.5s;
    gap: 1em;
    color: var(--color-text-black);
    background-color: var(--color-background-pink-purple);
    appearance: none;
}











/**************/
/* section 2*/
/**************/
main section:nth-of-type(2) li > a:last-of-type {
    background-color: var(--color-white);
    border-radius: 20em;
    padding: 1em 2em 1em 2em;
    color: var(--color-text-black);
    text-align: center;
    order:3;
    width: max-content;
    transition: .3s 
    ease 0s, .3s 
    ease 0s;
}

main section:nth-of-type(2) ul {
    display: flex;
    flex-direction: column;
    gap: 4em;
}
main section:nth-of-type(2) a{
    display: flex;
    flex-direction: column;
    align-items: center;
}

main section:nth-of-type(2) li > a:first-of-type {
    font-family: "parking-regular";
    font-size: 1.7em;
    color: var(--color-p);
    width: 80%;
    text-align: center;
    font-weight: 300;
    order:2;
}


/* toegankelijkheid */
main section:nth-of-type(2) h3:hover {
    cursor: pointer;
}
main section:nth-of-type(2) h3:active {
color: var(--color-active);
}
main section:nth-of-type(2) h3:focus-visible{
    outline-color:var(--color-white);
	outline-style:solid;
	outline-width:.15em;
	outline-offset:.2em;
}

/* tekst animatie section 2 */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
/* https://www.youtube.com/watch?v=UmzFk68Bwdk */
@media (prefers-reduced-motion: no-preference) {
    main section:nth-of-type(2) > img:last-of-type {
        animation-name: lefttoright;
        animation-timeline: scroll(root);
    }
}
/* animatie voor bewegende tekst bij scrollen */
@keyframes lefttoright{
    to{
        transform: translate(calc(-50% - 1.3rem));
    }
}


main section h2 strong:nth-of-type(2) {
    background-color: var(--color-text-black);
    color: var(--color-white);
    font-size: xx-large;
    text-align: center;
}

main section:nth-of-type(2) {
    background-image: var(--background-img-main);
    display: flex;
	flex-direction: column;
}

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


main section:nth-of-type(2) > img{
    overflow-x: hidden;
    position: relative;
    width: 800%;
}

main section:nth-of-type(2) li > img{
    width: 65%;
    order:1;
    transition:.3s 
    ease 0s, .3s 
    ease 0s;
}

main section:nth-of-type(2) ul li img:hover {
    cursor: pointer;
transform:scale(1.1);
}

/* toegankelijkhed */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
@media (prefers-reduced-motion: no-preference) {
    main section:nth-of-type(2) ul li img:hover {
        cursor: pointer;
    transform:scale(1.1);
    }  
}

main section:nth-of-type(2) li > a:last-of-type:hover{
    translate: 0 .5em;
}
main section:nth-of-type(2) li > a:last-of-type:active{
    background-color: var(--color-background-pink-purple);
    color: var(--color-white);
}
main section:nth-of-type(2) li > a:last-of-type:focus-visible{
    outline-color: var(--outline-focus-color);
    outline-width: 0.5em;
}


















/**************/
/* section 3*/
/**************/
main section:nth-of-type(3)>a:last-of-type {
    background-color: var(--button-background);
    border-radius: 20em;
    padding: 1em 2em 1em 2em;
    color: var(--button-color);
    text-decoration: none;
    font-family: "chaney-wide";
    display: inline-block;
    text-align: center;
    grid-row:8/9;
    grid-column:2/3;
}
main section:nth-of-type(3)>a:last-of-type:hover{
    translate: 0 .5em;
    cursor: pointer;
    transition: .3s 
ease 0s, .3s 
ease 0s;
}

main section:nth-of-type(3)>a:last-of-type:active{
    background-color: var(--color-background-pink-purple); 
    color: var(--color-white);
    transition: .3s 
    ease 0s,  .3s 
    ease 0s;
}


main section:nth-of-type(3) p a {
    /* text-decoration: underline; */
    font-family: "archia-regular";
    /* color: var(--color-background-pink); */
}

main section:nth-of-type(3) {
  display: grid;
  grid-template-rows:
  2em /* 1/2 ruimte boven h2 (voor mezelf) */
  max-content /* h2 */
  2em
  max-content/* p*/
  3em
  max-content /* p*/
  3em /* a */
  max-content
  3em /*  ruimte onder a */;
grid-template-columns: 8% 80% 12%;
position: relative;
}




main section:nth-of-type(3) h2 {
    font-family: "parking-regular";
    font-weight: 300;
    font-size: 250%;
    grid-row:2/3;
    grid-column:2/3;
}

main section:nth-of-type(3) p {
    font-family: "archia-regular";
    text-align: start;
    position: relative;
    line-height: 160%;
    font-size: large;
}
main section:nth-of-type(3) p:first-of-type{
    grid-row:4/5;
    grid-column:2/3;
}
main section:nth-of-type(3) p:last-of-type{
    grid-row:6/7;
    grid-column:2/3;
}

main section:nth-of-type(3) img {
    display: flex;
    overflow-x: auto;
    flex-shrink: 0;
   
}














/**************/
/* section 4*/
/**************/

main section:nth-of-type(4) {
    background-color: var(--background-color-main2);
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    position: relative;
}


main section:nth-of-type(4) ul{
    /* grid-column:2/3;
    justify-self: center; */
    grid-column: 2 / 3;
    justify-self: center;
    display: flex;
    gap: 4em;
    flex-direction: column;
    align-items: center;
    padding: 4em 0;
}
main section:nth-of-type(4) li {
    /* display: flex;
    flex-direction: column-reverse; */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1em;
}


main section:nth-of-type(4) p {
    grid-row:1/2;
    justify-self: center;

}




















/**************/
/* section 5*/
/**************/
main section:nth-of-type(5) {
    text-align: center;
    display: grid;
    grid-template-rows: 
    2em  /* 1/2 */
    max-content /* 2/3 */
      2em /* 3/4 */
      max-content/* 4/5 */
       1em /* 5/6 */
       max-content /* 6/7 */
       1em /* 7/8 */
       max-content /* 8/9 */
       15em/* 9/10 */; 
 
    grid-template-columns: 15% 70% 15%;
    position: relative;
}


main section:nth-of-type(5) p {
    justify-self: center;
    color: var(--color-p);
    font-family: "archia-regular";
    text-align: center;


    line-height: 160%;
    font-size: large;

       grid-row:4/5;
    grid-column:2/3;
}

main section:nth-of-type(5) h2 strong {
    display: flex;
    flex-direction: column;
}

main section:nth-of-type(5) h2 strong:nth-of-type(2) {
    font-size: 210%;
    font-weight: 300;
}

main section:nth-of-type(5) h2 {
    flex-direction: column;
    font-family: "parking-regular";
    grid-column:2/3;
    grid-row:2/3;
}

main section:nth-of-type(5) > a {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    height: 4em;
    justify-self: center;
}

main section:nth-of-type(5)img {
    display: flex;
}


main section:nth-of-type(5) a {
    background-color: var(--color-text-black);
    border-radius: 20em;
    color: var(--color-white);
    text-align: center;
    grid-row:6/7;
    grid-column:2/3;
    align-content: center;
    display: grid;
}

main section:nth-of-type(5) address{
    display: flex;
    flex-direction: column;
    grid-row:8/9;
    grid-column:2/3;
    justify-self: center;
}

/* toegankelijkheid */
main section:nth-of-type(5) a:hover{
    translate: 0 .5em;
    transition: .3s 
    ease 0s,  .3s 
    ease 0s;
}
main section:nth-of-type(5) a:active{
    background-color: var(--backgroud-color-button-white);
    color: var(--color-text-black);
}

main section:nth-of-type(5)address a:hover{
    translate: 0 .5em;
    transition: .3s 
    ease 0s, .3s 
    ease 0s;
}

main section:nth-of-type(5) address a:active{
    background-color: var(--color-background-pink-purple);
    color: var(--color-white);
}


main section:nth-of-type(5) address > a{
    background-color: var(--color-white);
    border-radius: 20em;
    padding: 1em 2em 1em 2em;
    color: var(--color-text-black);
    text-align: center;
    width: max-content;
    font-style: normal;  
}


main section:nth-of-type(5) {
    background-image: var(--background-img-main);
}


main section:nth-of-type(5) img {
    width: 20em;
}

main section:nth-of-type(5) ul {
        display:flex;
        overflow:auto;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        overscroll-behavior-x:contain;
        scrollbar-width:thin;
        scrollbar-color: var(--color-background-pink-purple) transparent;
        grid-row:9/10;
        grid-column:1/4;
}

main section:nth-of-type(5) svg{
    grid-row:11/12;
    grid-column:2/3;
}
/* toegankelijkheid */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
@media (prefers-reduced-motion: no-preference) {
    main section:nth-of-type(5) svg{
        animation-name: slideinleft2;
        animation-duration: 3s;
        animation-iteration-count:infinite;
    }
}



main section:nth-last-of-type(5) li{
    flex-basis:100%;
    flex-shrink:0;
    scroll-snap-align:center;
}
main section:nth-of-type(5) li{
    display:flex;
    align-items: flex-end;
}
main section:nth-of-type(5) ul::scroll-marker-group{
    height:3em;
    display: flex;
    justify-content:center;
    align-content:center;
    row-gap:.25em;
    column-gap:.5em;
  }