@font-face {
    font-family: "Pacifico";
    src: url("fonts/Pacifico.woff2") format("woff2"); /* https://www.fontsquirrel.com/fonts/pacifico */
    src: url("fonts/Pacifico.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --bg: light-dark( #F3E9DC, #00182B );
    --clr: light-dark( rgb(0, 0, 0), rgb(255, 255, 255) );
}

* {
    padding: 0;
    margin: 0;
    background: var(--bg)
    
}

html {
    scroll-snap-type: y mandatory;
    color: var(--clr);
}



header {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #16b9fa;
    background: radial-gradient(circle,rgba(22, 185, 250, 1) 0%, rgba(62, 154, 230, 1) 17%, rgba(28, 75, 232, 1) 34%, rgba(39, 80, 230, 1) 52%, rgba(106, 130, 230, 1) 69%, rgba(81, 172, 232, 1) 84%, rgba(34, 132, 230, 1) 100%);
    /*https://cssgradient.io/*/
    background-size: 300% 300%;
    animation: moveGradient 5s ease infinite;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /*https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type*/
}

@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



h1 {
    font-family: "Pacifico", Arial, Helvetica, sans-serif; /* https://www.fontsquirrel.com/fonts/pacifico */
    font-size: 4em;
    background-color: transparent;
}

h2 {
    background: transparent;
}

main {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
/*https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type*/

.motor-section {
    width: 100%;
    height: 100%;
}

.motor-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.over-mij {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 2em;
    margin-bottom: 4em;
}

.container {
    display: flex;
    flex-direction: column;
}

.container img:nth-child(odd) {
    align-self: flex-start;
}

.container img:nth-child(even) {
    align-self: flex-end;
}

.container p:nth-child(odd) {
    align-self: flex-end;
}

.container p:nth-child(even) {
    align-self: flex-start;
}

.container img {
    width: 270px;
    height: auto;
    margin-bottom: 3em;
}

.reizen-section {
    position: relative;
    min-height: 200vh;
    margin-bottom: 6em;
}

.auto-img {
    position: absolute;
    background-color: transparent;
    z-index: 10;
    left: 10%;
    width: 150px;
    height: auto;
    margin-bottom: 0;
}


    .auto-img {
        animation-name: moveCar;
        animation-timeline: view();
        animation-range: contain cover;
        animation-fill-mode: both;
        position: sticky;
        top: 50%;
        @media (min-width: 800px) {
            animation-name: moveCarGroot;
        }
        @media (min-width: 1200px) {
            animation-name: moveCarGrootst;
        }
    }
    /*Het media query gedeelte met behulp van Sanne*/

@media (min-width: 1200px) {
    .reizen-section {
        margin: 4em;
    }
}

@keyframes moveCar {
    0% {
        top: 10%;
        transform: translateX(0);
    }
    30%, 43%, 70% {
        top: 25%;
        transform: translateX(40vw);
    }
    25%, 50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0vw);
    }
}    
/*Met behulp van Cyd*/

@keyframes moveCarGroot {
    0% {
        top: 10%;
        transform: translateX(0);
    }
    30%, 43%, 70% {
        top: 25%;
        transform: translateX(60vw);
    }
    25%, 50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0vw);
    }

}

@keyframes moveCarGrootst {
     0% {
        top: 10%;
        transform: translateX(0);
    }
    30%, 43%, 70% {
        top: 25%;
        transform: translateX(70vw);
    }
    25%, 50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0vw);
    }
}

.reizen-section h2 {
    margin-bottom: 2em;
}

section:nth-of-type(1) {
    width: 100vw;
    height: 100vh;

}

.leerdoel-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 6em;
}

dialog {
    margin: auto;
}



dialog form {
    display: flex;
    flex-direction: column;
}

dialog form h3 {
    font-size: 1.5em;
}



.leerdoel-section button {
    font-family: "Pacifico", Arial, Helvetica, sans-serif;
    font-size: 2em;
    margin: 2em;
    padding: 1em;
    background-color: rgb(251, 120, 69);
    border-color: transparent;
}



dialog ::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    filter: blur(16px);
    /*https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/filter-function/blur*/
}


.wingdingsModus *, .wingdingsModus button {
    font-family: "Wingdings", "Webdings";
}