html {
    --primary-color: rgb(0, 8, 95);
    --secondary-color: rgb(255, 196, 0);

    /* Color-mix */
    /* Link: https://developer.chrome.com/docs/css-ui/css-color-mix?hl=nl */
    --background-color: linear-gradient(to bottom,
            color-mix(in oklab, var(--primary-color) 80%, white),
            color-mix(in oklab, var(--primary-color) 50%, black));

    --flag-color: linear-gradient(to bottom,
            color-mix(in oklab, var(--secondary-color) 30%, red),
            color-mix(in oklab, var(--secondary-color) 30%, white),
            color-mix(in oklab, var(--secondary-color) 30%, blue));
    --ellipse-color: color-mix(in oklab, var(--secondary-color) 60%, rgb(123, 253, 111));
    --ellipse-border-color: color-mix(in oklab, var(--secondary-color) 50%, rgb(51, 128, 0));
    --text-color: color-mix(in oklab, var(--primary-color) 60%, rgb(255, 160, 160));
    --border-color: color-mix(in oklab, var(--primary-color) 60%, rgb(4, 0, 66));
}


*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    height:120em;
    background-image: var(--background-color); 
    background-size: cover;
    background-attachment: fixed; /* zorgt dat de achtergrond niet meebeweegt */
}


main {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    justify-content: start;
    align-items: center;
    gap: 20em;
}

h1 {
    position:absolute;
    transform: translateX(-50%) translateY(-50%);
    font-size: 2rem;
    color: var(--border-color);
    font-weight: bold;
    background: var(--text-color);
    border: .1em solid var(--border-color);
    padding:.5em;
    border-radius: 2em;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
}

section:nth-of-type(2){
    display:flex;
    flex-direction:row;
    gap:10em;
    flex-wrap:wrap;
    justify-content:center;
}



/* Ellipses */
/* Amit Sheen: corner-shape */
/* Link: https://frontendmasters.com/blog/understanding-css-corner-shape-and-the-power-of-the-superellipse/ */
/* Codepen: https://codepen.io/amit_sheen/pen/pvJKGov/5d14d83481ba74eea561f08d81493614?editors=1100 */
main > section:first-of-type > div:first-of-type {
    position: relative;
    margin-top:20em;
}

main > section:first-of-type > div:first-of-type div {
    inset:-2em;
    position: absolute;
    background-color: var(--ellipse-color);
    border: 4px solid var(--ellipse-border-color);
    border-radius: 50%;
    transform:
        rotate(calc(var(--i) * 20deg))
        /* Richting bepalen */
        translateY(13em)
        /* Afstand bepalen */
        rotate(calc(var(--i) * -20deg));
    /* Divs weer rechtzetten */
    animation: shape 3s calc(var(--i) * 0.16667s - 3s) infinite ease-in;
}

div:first-of-type div:nth-child(1) {
    --i: 0;
}

div:first-of-type div:nth-child(2) {
    --i: 1;
}

div:first-of-type div:nth-child(3) {
    --i: 2;
}

div:first-of-type div:nth-child(4) {
    --i: 3;
}

div:first-of-type div:nth-child(5) {
    --i: 4;
}

div:first-of-type div:nth-child(6) {
    --i: 5;
}

div:first-of-type div:nth-child(7) {
    --i: 6;
}

div:first-of-type div:nth-child(8) {
    --i: 7;
}

div:first-of-type div:nth-child(9) {
    --i: 8;
}

div:first-of-type div:nth-child(10) {
    --i: 9;
}

div:first-of-type div:nth-child(11) {
    --i: 10;
}

div:first-of-type div:nth-child(12) {
    --i: 11;
}

div:first-of-type div:nth-child(13) {
    --i: 12;
}

div:first-of-type div:nth-child(14) {
    --i: 13;
}

div:first-of-type div:nth-child(15) {
    --i: 14;
}

div:first-of-type div:nth-child(16) {
    --i: 15;
}

div:first-of-type div:nth-child(17) {
    --i: 16;
}

div:first-of-type div:nth-child(18) {
    --i: 17;
}


/* Keyframes for shape animation */
@keyframes shape {

    0%,
    100% {
        corner-shape: superellipse(-100);
    }

    5% {
        corner-shape: superellipse(100);
    }
}

/* WAT IS SUPERELLIPSE??? */
/* Simpel gezegd, bij 0 (Bevel) heb de hoeken aan de linker/rechter/boven/onderkant, 
bij positief (Square) komen de hoeken linksboven/rechtsonder etc. en bij
negatief (Notch) worden de randen naar binnen */



/* DE VLAG */
/* clip-path with shape() */
/* Link https://developer.chrome.com/blog/css-shape?hl=nl#create_a_flag_shape */
/* Codepen https://codepen.io/web-dot-dev/pen/YPzgNrL */
@property --animated-wave-height {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@keyframes curve {
    from { --animated-wave-height: 20px; }
    to   { --animated-wave-height: 30px; }
}

main > section:nth-of-type(2) > img,
main > section:nth-of-type(2) > div {
    width: 600px;
    height: 360px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
    background: var(--flag-color, #3498db);
    animation: curve 3s infinite alternate, wave-move 4s ease-in-out infinite;
    --wave-height: min(var(--animated-wave-height, 40px), 160px);
    --wave-offset: 0px;
    clip-path: shape(
        from 0px calc(var(--wave-height) + var(--wave-offset)),
        curve to 100% calc(var(--wave-height) + var(--wave-offset)) 
              with 25% calc(0px + var(--wave-offset)) / 75% calc(var(--wave-height) * 2 + var(--wave-offset)),
        vline to calc(100% - var(--wave-height)),
        curve to 0 calc(100% - var(--wave-height)) 
              with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
        close
    );
}



/* Wat is curve */


/* Wat is vline */