@layer basis, algemeen, lichaam, interactie, animatie;

@layer basis{

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

@font-face{ 
    font-family:'Roboto Flex';
    src: url('../fonts/roboto-flex.woff2') format('woff2');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}
}

/* --------------------------------------------------------------------------------- MARK: ALGEMEEN 
*/

@layer algemeen{

:root{
    --color-main-background: #F5F0E4;
    --color-star: #F4574C;
    --color-eyes: white;
    --color-pupils: #1A1A1A;
    --color-legs: #4A2E1F;
    --color-btn: #F3B6BE;
    --color-btn-hover: #F7C9CF;
    --color-btn-active: #FF8C42;
    --color-text: #1A1A1A;
    --star-size: clamp(80px, 30vw, 250px);
}

@layer interactie{
    html{
        container-type: style;
    }

    html:has([value="dizzy"]:checked){
        --dizzy:pressed;
    }

    html:has([value="evil"]:checked){
        --evil:pressed;
    }

    html:has([value="defect"]:checked){
        --defect:pressed;
    }

    html:has([value="failing"]:checked){
        --failing:pressed;
    }

    html:has([value="startknop"]:checked){
        --startknop:pressed;
    }
}

body{
    background-color: var(--color-main-background);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 100vh;
}

header{
    display: grid;
    place-items: center;
    text-align: center;
        
    width: 100%;

    margin-bottom: 5em;

    img{
        display: none;
    }
}

h1{
    position: relative;

    color: var(--color-text);
    font-family: 'Roboto Flex', sans-serif;
    font-size: clamp(1em, 7vw, 3.5em);
    line-height: 1;
    letter-spacing: -0.02em;

    /* Inspiratiebron titel: https://codepen.io/RobinTreur/pen/pyWLeB?editors=1100 */
    text-shadow:
    rgba(255, 220, 100, 0.6) 0 0 10px,
    rgba(255, 220, 100, 0.3) 0 0 20px;

    animation: variabeleTitel 6s linear infinite;

    &:hover{
        animation-duration: 2s;
    }

    span:last-child:hover{
        text-shadow: none;
    }
}

/* Bron: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts voor de styling/ animatie variabel font
Bron: chatGPT voor font-variation-settings dat niet werkte en daardoor oplossing font-weight & font-stretch */
@keyframes variabeleTitel{

    0%{
        font-weight: 600;
        font-stretch: 100%;
        transform: rotate(0deg);
        letter-spacing: 0;
    }

    20%{
        transform: rotate(1deg);
    }

    21%{
        transform: rotate(-3deg);
    }

    22%{
        transform: rotate(1deg);
    }

    40%{
        font-weight: 800;
        font-stretch: 110%;
        letter-spacing: 0.02em;
    }

    50%{
        transform: rotate(-2deg);
    }

    51%{
        transform: rotate(2deg);
    }

    52%{
        transform: rotate(-1deg);
    }

    70%{
        font-weight: 700;
        font-stretch: 95%;
        letter-spacing: 0.03em;
    }

    100%{
        font-weight: 600;
        font-stretch: 100%;
        transform: rotate(0deg);
        letter-spacing: 0;
    }
}

/* Titel hover naar Spanish Inquisition */
@layer animatie{

header{

    h2{
        font-family: 'Roboto Flex', sans-serif;
        font-size: clamp(0.5em, 5vw, 1.4em);
        line-height: 1;
        letter-spacing: -0.02em;

        color: var(--color-text);

        display: none;
    }

    span{
        position: relative;
    }

}

header span:nth-of-type(2):hover{
    color: transparent;
}

/* Tekst: Spanish Inquisition */
header span:nth-of-type(2):hover::after{
    content:"Spanish Inquisition";

    position: absolute;
    width: 10em;
    left: 0;
    
    text-shadow:
    rgba(255, 220, 100, 0.6) 0 0 10px,
    rgba(255, 220, 100, 0.3) 0 0 20px;
    color: var(--color-text);
}

}

/* Ster gaat op en neer */
@layer animatie{

main section:nth-child(2){
    position: relative;
    transform-origin: center;

    animation: opEnNeer 2.5s ease-in-out infinite;
}

@keyframes opEnNeer{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-10px);
    }

    100%{
        transform: translateY(0px);
    }

}

}

/* Titel en button weghalen */
main > section:first-child,
main > section:last-child{
    display: none;
}

/* Interactie knoppen */
main > section > label{
    background-color: var(--color-btn);
    color: white;
    text-transform: uppercase;
    font-family: 'Roboto Flex', sans-serif;
    font-weight: bold;
    text-align: center;

    border-radius: 6px;
    cursor: pointer;

    padding: clamp(0.6em, 1.5vw, 1em) clamp(1em, 3vw, 1.5em);
    font-size: clamp(0.8em, 2vw, 1em);

    input{
        display: none;
    }
 
    &:hover{
        background-color: var(--color-btn-hover);

        transition: background-color .5s ease;
    }
}

main > section > label:has(input:checked){
    background-color: var(--color-btn-active);
}

footer{
    margin-top: 11em;

    /* Startknop */
    label{
        background-color: var(--color-btn-active);
        color: white;
        text-transform: uppercase;
        font-family: 'Roboto Flex', sans-serif;
        letter-spacing: 0.015em;
        font-weight: bold;

        border-radius: 6px;
        border: none;
        cursor: pointer;

        padding: 1em 1.5em;

        input{
            display: none;
        }
    }

    p{  
        position: absolute;
        bottom: 0.5em;
        right: 0.5em;

        font-family: 'Roboto Flex', sans-serif;
        letter-spacing: 0.015em;
        font-size: 0.8em;
    }

    p:nth-of-type(2){
        display: none;
    }

    /* Startknop hover */
    &:has([type="radio"]:hover){
        label{
            background-color: var(--color-btn-hover);

            transition: background-color .5s ease;
        }
    }

    /* Startknop en teksten aanpassen */
    &:has([type="radio"]:checked){
        label{
            display: none;
        }

        /* Philosophical grounds */
        p:nth-of-type(1){
            display: none;
        }

        /* My name? */
        p:nth-of-type(2){
            display: block;
            position: relative;

            right: clamp(8em, 27vw, 35em);
            bottom: clamp(0em, 2vw, 1em);
        }

        p:nth-of-type(2):hover::after{
            content:"There are some who call me... Tim.";

            position: absolute;
            width: clamp(10em, 80vw, 30em);
            top: 120%;
            left: 0;
        }
    }
}

}

/* --------------------------------------------------------------------------------- MARK: LICHAAM HOOFD
*/

/* Bron: calc met var(--star-size) gebruiken. Ik heb clamp in het vorige project leren gebruiken 
maar ik liep vast op sommige elementen responsive te maken met clamp en toen heb ik chatGPT gevraagd hoe ik dingen als mijn ster responsive zou kunnen maken. 
Hij kwam toen met --star-size in de root zetten en alles via calc daarop afstemmen. Hij heeft me met een paar geholpen totdat ik het zelf begreep. */

@layer lichaam{

/* ---------------Ring van sterren --------------*/
/* Bron: https://3dtransforms.desandro.com/carousel */

main > section > aside{
    position: absolute;
    top: -6em;
    left: 1.5em;

    width: calc(var(--star-size) * 0.8);
    height: calc(var(--star-size) * 0.8);
    perspective: 1000px;
    z-index: 10;

    opacity: 0;
}

/* Sterren container */
main > section > aside > figure{
    width: 100%;
    height: 100%;
    position: absolute;

    transform-style: preserve-3d;
    animation: rotateRing 10s infinite linear;
}

/* Sterren zelf */
main > section > aside > figure > span{
    color: gold;
    text-align: center;
    font-size: calc(var(--star-size) * 0.12);
    line-height: calc(var(--star-size) * 0.16);

    position: absolute;
    top: 50%;
    left: 50%;

    width: calc(var(--star-size) * 0.16);
    height: calc(var(--star-size) * 0.16);

    margin-left: calc(var(--star-size) * -0.08);
    margin-top: calc(var(--star-size) * -0.08);
}

@layer animatie{

main > section > aside > figure > span:nth-child(1){ 
    transform: rotateY(0deg) translateZ(calc(var(--star-size) * 0.4)); 
}

main > section > aside > figure > span:nth-child(2){ 
    transform: rotateY(60deg) translateZ(calc(var(--star-size) * 0.4)); 
}

main > section > aside > figure > span:nth-child(3){ 
    transform: rotateY(120deg) translateZ(calc(var(--star-size) * 0.4)); 
}

main > section > aside > figure > span:nth-child(4){ 
    transform: rotateY(180deg) translateZ(calc(var(--star-size) * 0.4)); 
}

main > section > aside > figure > span:nth-child(5){ 
    transform: rotateY(240deg) translateZ(calc(var(--star-size) * 0.4)); 
}

main > section > aside > figure > span:nth-child(6){ 
    transform: rotateY(300deg) translateZ(calc(var(--star-size) * 0.4)); 
}

@keyframes rotateRing{

    from{ 
        transform: rotateY(0deg); 
    }

    to{ 
        transform: rotateY(360deg); 
    }
}

}

/* Ster Hoofd */
main > section > aside + div{
    position: relative;
    display: flex;
    justify-content: center;

    transition: 0.15s linear;

    z-index: 1;

    background: var(--color-star);
    width: var(--star-size);
    aspect-ratio: 5 / 4;

    /* Bron clip-path ster: https://bennettfeely.com/clippy/. Vervolgens met chatGPT de inkepingen op de juiste plek gemaakt */
    clip-path: polygon(
        50% 0%, /* Punt 1 */
        60% 27%, /* Inkeping 1 (rechts)*/
        82% 8%, /* 2 */
        72% 34%, /* Inkeping 2 */
        100% 34%, /* 3 */
        75% 46%, /* Inkeping 3 */
        92% 70%, /* 4 */
        68% 61%, /* Inkeping 4 */
        78% 95%, /* 5 */
        55% 72%, /* Inkeping 5 */
        50% 100%, /* 6 */
        45% 72%, /* Inkeping 6 */
        22% 95%, /* 7 */
        32% 60%, /* Inkeping 7 */
        8% 70%, /* 8 */
        25% 46%, /* Inkeping 8 */
        0% 34%, /* 9 */
        28% 32%, /* Inkeping 9 */
        18% 8%, /* 10 */
        40% 27% /* Inkeping 10 */
    );

    transform: rotate(3deg);
}

/* Ogen */
main > section > aside + div > div{
    display: flex;
    justify-content: center;

    gap: clamp(10px, 3vw, 20px);
    margin-top: calc(var(--star-size) * 0.3);

    transform: rotate(-4deg);

    /* Oogvorm */
    label{
        background: var(--color-eyes);

        display: flex;
        justify-content: center;
        align-items: center;

        width: calc(var(--star-size) * 0.1);
        height: calc(var(--star-size) * 0.04);

        /* Bron oogvorm: https://codepen.io/samc36/pen/KNEOpG */
        border-radius: 90% 0px;

        transform: rotate(19deg);

        cursor: pointer;

        input{
            display: none;
        }

        /* Pupil */
        div{
            background: var(--color-pupils);

            width: calc(var(--star-size) * 0.02);
            height: calc(var(--star-size) * 0.03);

            border-radius: 50%;

            transform: rotate(-19deg);
        }
    }
}

/* --------------------------------------------------------------------------------- MARK: LICHAAM BENEN
*/

/* Benen container */
main > section > div:last-child{
    display: flex;
    justify-content: center;

    gap: calc(var(--star-size) * 0.16);
    margin-top: calc(var(--star-size) * -0.35);
}

/* Been */
main > section > div:last-child > div{
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    width: calc(var(--star-size) * 0.03);
    height: calc(var(--star-size) * 0.7);
    background: var(--color-legs);

    transform-origin: top center;
}

/* Onderbeen */
main > section > div:last-child > div > div{
    position: absolute;
    top: 100%;
    margin-top: calc(var(--star-size) * 0.04);

    width: calc(var(--star-size) * 0.03);
    height: calc(var(--star-size) * 0.5);
    background: var(--color-legs);

    transform-origin: top center;
}

/* Voet */
main > section > div:last-child > div > div > div{
    position: absolute;
    bottom: 0;

    width: calc(var(--star-size) * 0.1);
    height: calc(var(--star-size) * 0.03);
    left: calc(var(--star-size) * -0.03);
    background: var(--color-legs);
    border-radius: 2px;
}

}

/* --------------------------------------------------------------------------------- MARK: INTERACTIE
*/ /* Bron hoe aanpakken Silly Walk en animaties: https://miocene.io/demo/css-noodle/ */

@layer interactie{

/* Interactie pupil, oog weg */
label:has(input[value="oog"]:checked) div{
    display: none;
}

/* Default titel: geen animatie bij titel na klik */
body:has(footer input[type="radio"]:checked) header h1{
    animation: none !important;
}

/* Interactieknoppen laten zien */
body:has(footer input[type="radio"]:checked) main > section:first-child,
body:has(footer input[type="radio"]:checked) main > section:last-child{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 30vh;
}

}

/* --------------------------------------------------------------------------------- MARK: ANIMATIE
*/

@layer animatie{

/* Animatie: ogen kijken rond */
main > section > div > div label div{
    animation: kijkRond 4.5s ease-in-out infinite;
}

@keyframes kijkRond{

    0%{
        transform: translateX(0) rotate(-19deg);
    }

    25%{
        transform: translateX(3px) rotate(-19deg);
    }

    50%{
        transform: translateX(-3px) rotate(-19deg);
    }

    75%{
        transform: translateX(2px) rotate(-19deg);
    }

    100%{
        transform: translateX(0) rotate(-19deg);
    }

}

/* Rechteroog heeft een vertraging met kijken */
main > section > div > div > label:last-child div{
    animation-delay: 0.5s;
}

/* Hoofd ster scale */
main > section > aside + div{
    animation: scaleHoofd 2.5s linear infinite;
}

@keyframes scaleHoofd{

    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.1);
    }

    100%{
        transform: scale(1);
    }

}

/* ------------------Knop START ("Probably ok") ------------------ */
@container style(--startknop:pressed){

    /* Titel wordt anders */
    header{
        position: relative;

        /* Bron: ik has voorheen flexboxen op de header voor de titels en vervolgens position: absolute op beide titels voor styling. Dat schaalde niet lekker mee en ik mmoest ze vervolgens bij elke nieuwe knop stylen. 
        Hier liep ik op vast en ik heb die code in chatGPT gezet met als prompt hoe ik de titels wél in het midden kon centreren. Hij kwam met grid. */
        display: grid; 
        place-items: center;
    }

    h1{
        text-shadow: none;
        font-size: clamp(1em, 5vw, 2.5em);
    }

    h2{
        position: absolute;
        top: 100%;
        margin-top: 0.3em;

        display: block;
    }

    header span:nth-of-type(1){
        color: transparent;  
    } 

    header span:nth-of-type(2){
        display: none;
    }

    /* Tekst: Everything is perfectly normal */
    header span:nth-of-type(1)::after{
        content: "Everything is perfectly normal.";
        display: block;

        color: black;
    }  

    /* Voor uitlijning interactieknoppen na druk op startknop */
    main{
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-wrap: wrap;
        
        gap: clamp(1rem, 8vw, 15vw);
    }

    /* Beide benen (en bovenbeen) */
    main > section > div:last-child > div{
        transform-origin: top center;
    }

    /* Linkerbeen */
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: beenLinks 1.2s infinite ease-in-out;
    }

    @keyframes beenLinks{

        0%{
            transform: rotate(-25deg);
        }

        50%{
            transform: rotate(25deg);
        }

        100%{
            transform: rotate(-25deg);
        }

    }

    /* Rechterbeen */
    section:nth-of-type(2) > div:last-child > div:last-child{
        animation: beenRechts 1.2s infinite ease-in-out;
    }

    @keyframes beenRechts{

        0%{
            transform: rotate(25deg);
        }

        50%{
            transform: rotate(-25deg);
        }

        100%{
            transform: rotate(25deg);
        }

    }

    /* Knie */
    section:nth-of-type(2) > div:last-child > div > div{
        animation: knie 3s infinite ease-in-out;
        transform-origin: top;
    }

    @keyframes knie{

        0%{
            transform: rotate(0deg);
        }

        50%{
            transform: rotate(40deg);
        }

        100%{
            transform: rotate(0deg);
        }

    }

    /* Voet links */
    section:nth-of-type(2) > div:last-child > div > div > div{
        animation: voetLinks 0.8s infinite ease-in-out;
        transform-origin: top center;
    }

    @keyframes voetLinks{

        0%{
            transform: rotate(15deg);
        }

        50%{
            transform: rotate(-10deg);
        }

        100%{
            transform: rotate(15deg);
        }

    }

    /* Voet rechts */
    section:nth-of-type(2) > div:last-child > div:last-child > div > div{
        animation: voetRechts 0.8s infinite ease-in-out;
        transform-origin: top center;
    }

    @keyframes voetRechts{

        0%{
            transform: rotate(-10deg);
        }

        50%{
            transform: rotate(15deg);
        }

        100%{
            transform: rotate(-10deg);
        }

    }

    /* Heen en weer lopen */
    section:nth-of-type(2){
        animation: basisLoopje 6s linear infinite;
    }

    @keyframes basisLoopje{

        0%{
            transform: translateX(-25px);
        }

        50%{
            transform: translateX(25px);
        }

        100%{
            transform: translateX(-25px);
        }

    }
}

/* ------------------Knop 1 Dizzy ------------------ */
@container style(--dizzy:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Who approved this?";

        color: white;
    }

    /* ------------- Silly Walk ------------- */
    main > section:first-child{
        position: relative;
        transform-origin: 50% 100px;
    }

    main:has(section:first-child label:nth-child(1) input:checked) > section:nth-of-type(2){
        animation: rondDraaien 6s linear infinite;
    }

    @keyframes rondDraaien{

        0%{
            transform: rotate(0deg);
        }

        100%{
            transform: rotate(-360deg);
        }

    }

    /* ------------- Achtergrond ------------- */
    body{
        /* Bron cirkel achtergrond: https://www.magicpattern.design/tools/css-backgrounds */
        background-image: radial-gradient(circle at center center, #444cf7, #e5e5f7), repeating-radial-gradient(circle at center center, #444cf7, #444cf7, 9px, transparent 18px, transparent 9px);
        background-blend-mode: multiply;
        opacity: 1;
        --color-legs: white;

        animation: achtergrondDizzy 5s infinite !important;
    }

    @keyframes achtergrondDizzy{

        0%{
            background-color: steelblue;
            transform: rotate(0deg);
        }

        10%{
            background-color: red;
            transform: rotate(3deg);
        }

        20%{
            background-color: orange;
            transform: rotate(-4deg);
        }

        30%{
            background-color: yellow;            
            transform: rotate(6deg);
        }

        40%{
            background-color: green;
            transform: rotate(-5deg);
        }

        50%{
            background-color: blue;
            transform: rotate(4deg);
        }

        60%{
            background-color: indigo;
            transform: rotate(-6deg);
        }

        70%{
            background-color: violet;
            transform: rotate(5deg);
        }

        80%{
            background-color: pink;
            transform: rotate(-3deg);
        }

        90%{
            background-color: brown;
            transform: rotate(2deg);
        }

        100%{
            background-color: steelblue;
            transform: rotate(360deg);
        }

    }

    main > section > aside + div{
        animation: misselijkGroen 2s linear infinite;
    }

    @keyframes misselijkGroen{

        0%{
            --color-star: #B5C306;
        }

        25%{
            --color-star: #B6C406;
        }

        50%{
            --color-star: #D4D977;
        }

        75%{
            --color-star: #B6C406;
        }

        100%{
            --color-star: #B5C306;
        }

    }

    /* ------------- Special ------------- */
    /* Ring van sterren */
    main > section > aside{
        opacity: 1;
    }

    /* Ogen als ster */
    main > section > aside + div > div{

        div{
            width: calc(var(--star-size) * 0.03);
            height: calc(var(--star-size) * 0.04);

            /* Bron: https://bennettfeely.com/clippy/ */
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }
    }
}

/* ----------------Knop 2 Evil (& ander thema)---------------- */
@container style(--evil:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Something is... different";
        color: white;
    }

    body{
        --color-star: #FFF000;
        --color-legs: white;
        --color-btn: red;
        --color-btn-active: #FFF000;
        --color-btn-hover: #FF7A70;
        --color-text: white;
        --color-main-background: #000435;
        --color-pupils: red;
    }

    /* Evil wenkbrouw links */
    main section:nth-of-type(2) > div > div > label:first-child::before{
        content: "";
        position: absolute;

        width: calc(var(--star-size) * 0.1);
        height: calc(var(--star-size) * 0.015);
        background-color: black;

        margin-bottom: calc(var(--star-size) * 0.14);
        transform: translateX(calc(var(--star-size) * -0.015));
        
        animation: wenkbrauwlinks 1s infinite ease-in-out;
        transform-origin: center;
    }

    @keyframes wenkbrauwlinks{

        0%{
            transform: rotate(10deg) translateX(calc(var(--star-size) * -0.015)) translateY(0);
        }

        50%{
            transform: rotate(15deg) translateX(calc(var(--star-size) * -0.015)) translateY(calc(var(--star-size) * -0.015));
        }

        100%{
            transform: rotate(10deg) translateX(calc(var(--star-size) * -0.015)) translateY(0);
        }

    }

    /* Evil wenkbrouw rechts */
    main section:nth-of-type(2) > div > div > label:last-child::before{
        content: "";
        position: absolute;

        width: calc(var(--star-size) * 0.1);
        height: calc(var(--star-size) * 0.015);
        background-color: black;

        margin-bottom: calc(var(--star-size) * 0.14);
        transform: rotate(-30deg) translateX(calc(var(--star-size) * -0.015));

        animation: wenkbrauwRechts 0.6s infinite ease-in-out;
        transform-origin: center;
    }

    @keyframes wenkbrauwRechts{

        0%{
            transform: rotate(-30deg) translateX(calc(var(--star-size) * -0.015)) translateY(0);
        }

        50%{
            transform: rotate(-35deg) translateX(calc(var(--star-size) * -0.015)) translateY(calc(var(--star-size) * -0.03));
        }

        100%{
            transform: rotate(-30deg) translateX(calc(var(--star-size) * -0.015)) translateY(0);
        }

    }

    /* Mond */
    main > section:nth-of-type(2) > aside + div > div::after{
        content: "";
        position: absolute;

        width: calc(var(--star-size) * 0.05);
        height: calc(var(--star-size) * 0.008);

        background-color: black;

        transform: rotate(-5deg) translateX(calc(var(--star-size) * 0.04)) translateY(calc(var(--star-size) * 0.16));
               
        border-radius: 10px;
    }

    /* ------------- Silly Walk ------------- */
    /* Agressiever */
    section:nth-of-type(2) div{
        animation: trillen 0.2s infinite;
    }

    @keyframes trillen{

        0%{ 
            transform: translateY(0px); 
        }

        50%{ 
            transform: translateY(-2px); 
        }

        100%{ 
            transform: translateY(0px); 
        }

    }

    /* Linkerbeen */
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: beenLinksEvil 1.2s infinite linear;
    }

    @keyframes beenLinksEvil{

        0%{
            transform: rotate(-45deg);
        }

        40%{
            transform: rotate(50deg);
        }

        55%{
            transform: rotate(30deg);
        }

        100%{
            transform: rotate(-45deg);
        }

    }

    /* Rechterbeen */
    section:nth-of-type(2) > div:last-child > div:last-child{
        animation: beenRechtsEvil 1.2s infinite linear;
    }

    @keyframes beenRechtsEvil{

        0%{
            transform: rotate(45deg);
        }

        40%{
            transform: rotate(-50deg);
        }

        55%{
            transform: rotate(-30deg);
        }

        100%{
            transform: rotate(45deg);
        }

    }

    /* Knie */
    section:nth-of-type(2) > div:last-child > div > div{
        animation: knieEvil 0.6s infinite linear;
        transform-origin: top;
    }

    @keyframes knieEvil{

        0%{
            transform: rotate(0deg);
        }

        50%{
            transform: rotate(70deg);
        }

        100%{
            transform: rotate(0deg);
        }

    }

    /* Voet links */
    section:nth-of-type(2) > div:last-child > div > div > div{
        animation: voetLinksEvil 0.8s infinite ease-in-out;
        transform-origin: top center;
    }

    @keyframes voetLinksEvil{

        0%{
            transform: rotate(25deg);
        }

        50%{
            transform: rotate(-25deg);
        }

        100%{
            transform: rotate(25deg);
        }

    }

    /* Voet rechts */
    section:nth-of-type(2) > div:last-child > div:last-child > div > div{
        animation: voetRechtsEvil 0.8s infinite ease-in-out;
        transform-origin: top center;
    }

    @keyframes voetRechtsEvil{

        0%{
            transform: rotate(-25deg);
        }

        50%{
            transform: rotate(25deg);
        }

        100%{
            transform: rotate(-25deg);
        }

    }

    /* Heen en weer lopen */
    section:nth-of-type(2){
        animation: basisLoopjeEvil 6s linear infinite;
    }

    @keyframes basisLoopjeEvil{

        0%{
            transform: translateX(-10px);
        }

        50%{
            transform: translateX(60px);
        }

        100%{
            transform: translateX(-10px);
        }

    }
}

/* ------------------Knop 3 Failing ------------------ */
@container style(--failing:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Oh dear.";
        color: white;
    }

    /* ------------- Achtergrond ------------- */
    body{
        /* Bron inspiratie achtergrond: https://www.sliderrevolution.com/resources/css-animated-background/ */
        background: linear-gradient(90deg, red, white, red, white);
        background-size: 200% 200%;
        
        animation: gradientAchtergrondEnShakeScherm 0.3s steps(6) infinite;
        /* Bron: in sprint 0 heb ik filter leren gebruiken, nu verdiept. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter */
        filter: blur(1px) contrast(120%);
        overflow-x: hidden;
    }

    @keyframes gradientAchtergrondEnShakeScherm{

        0% {
            background-position: 0% 50%;
            transform: translate(0, 0);
            filter: brightness(1);
        }

        25%{ 
            transform: translate(-3px, 2px); 
        }

        50%{ 
            transform: translate(3px, -2px); 
            filter: brightness(1.3);
        }

        75%{ 
            transform: translate(-2px, -3px); 
        }

        100% {
            background-position: 100% 50%;
            transform: translate(2px, 3px);
            filter: brightness(1);
        }
    
    }

    /* ------------- Silly Walk ------------- */
    section:nth-of-type(2){
        animation: loopVanScherm 5s linear infinite;
    }

    @keyframes loopVanScherm{

        0%{ 
            transform: translateX(-100vw) rotate(0deg); 
        }

        20%{ 
            transform: translateX(80vw) rotate(10deg); 
        }

        40%{ 
            transform: translateX(-60vw) rotate(-8deg); 
        }

        60%{ 
            transform: translateX(100vw) rotate(12deg); 
        }

        80%{ 
            transform: translateX(-90vw) rotate(-10deg); 
        }

        100%{ 
            transform: translateX(100vw) rotate(0deg); 
        }

    }

    /* Voet rechts */
    section:nth-of-type(2) > div:last-child > div:last-child > div > div{
        animation: voetRechts 0.2s infinite ease-in-out;
    }

    /* Voet links */
    section:nth-of-type(2) > div:last-child > div > div > div{
        animation: voetLinks 0.2s infinite ease-in-out;
    }

    /* Knie */
    section:nth-of-type(2) > div:last-child > div > div{
        animation: knie 1s infinite ease-in-out;
    }

    /* Rechterbeen */
    section:nth-of-type(2) > div:last-child > div:last-child{
        animation: beenRechtsEvil 0.4s infinite ease-in-out;
    }

    /* Linkerbeen */
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: beenLinksEvil 0.4s infinite ease-in-out;
    }

    /* Pulse animatie */
    main > section > aside + div{
        animation: scaleHoofd 1s linear infinite;
    }

    @keyframes scaleHoofd{

        0%{
            transform: scale(1);
            box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
        }

        50%{
            transform: scale(1.2);
        }

        100%{
            transform: scale(1);
            box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
        }

    } 
}

/* ------------------Knop 4 Defect ------------------ */
@container style(--defect:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "'Tis but a scratch";

        color: black;
    }

    /* ------------- Achtergrond ------------- */
    /* Bronnen: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-linear-gradient
    & https://codepen.io/meduzen/pen/zxbwRV?editors=1100 */
    body::after{
        content: "";
        position: fixed;
        inset: 0;

        width: 150vw;
        height: 150vh;

        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 3px,
            black 4px
        );

        pointer-events: none;
        animation: scanlines 0.2s linear infinite;
        opacity: 0.4;

        z-index: -1;
    }

    @keyframes scanlines{

        0%{ 
            transform: translateY(0); 
        }

        100%{ 
            transform: translateY(10px); 
        }

    }

    /* ------------- Silly Walk ------------- */
    /* Linkerbeen */
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: beenLinksDefect 0.6s infinite ease-in-out;
    }

    @keyframes beenLinksDefect{

        0%, 100%{
            transform: rotate(-20deg); 
        }

        40%{ 
            transform: rotate(40deg); 
        }

        60%{ 
            transform: rotate(10deg); 
        }

    }

    /* Rechterbeen */
    section:nth-of-type(2) > div:last-child > div:last-child{
        animation: beenRechtsDefect 0.45s infinite ease-in-out;
        animation-delay: 0.1s;
    }

    @keyframes beenRechtsDefect{

        0%, 100%{ 
            transform: rotate(30deg); 
        }

        30%{ 
            transform: rotate(-30deg); 
        }

        50%{ 
            transform: rotate(50deg); 
        }

    }

    /* Been Uitval (linkerbeen)*/
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: beenUitval 5s infinite;
    }

    @keyframes beenUitval{

        0%, 65%{
            transform: rotate(0deg) translateY(0);
        }

        70%{
            transform: rotate(20deg) translateY(10px);
        }

        75%{
            transform: translateY(200px) rotate(90deg);
        }

        75%, 90%{
            transform: translateY(300px) rotate(90deg);
        }

        95%{
            transform: translateY(-20px) rotate(-30deg);
        }

        100%{
            transform: rotate(0deg) translateY(0);
        }
    }

    /* ------------- Special ------------- */
    /* Glitch extra hoofd */
    main > section:nth-of-type(2){
        transform: rotate(10deg);
    }

    main > section:nth-of-type(2)::before{
        content: "";
        position: absolute;
        inset: 0;
        width: var(--star-size);
        aspect-ratio: 5 / 4;

        background: var(--color-star);
        clip-path: polygon(
            50% 0%,
            65% 35%,
            90% 0%,
            75% 40%,
            100% 40%,
            70% 55%,
            100% 80%,
            60% 65%,
            85% 100%,
            50% 75%,
            40% 100%,
            45% 65%,
            10% 100%,
            30% 60%,
            0% 80%,
            30% 50%,
            0% 40%,
            35% 35%,
            10% 0%,
            45% 30%
        );

        opacity: 0.3;
        transform: translate(10px, -10px);

        z-index: -1;

        animation: glitchHoofd 0.8s steps(4) infinite;
    }

    main > section:nth-of-type(2)::after{
        content: "";
        position: absolute;
        inset: 0;
        width: var(--star-size);
        aspect-ratio: 5 / 4;

        background: blue;
        clip-path: polygon(
            48% 2%,
            70% 30%,
            95% 10%,
            78% 42%,
            100% 50%,
            68% 58%,
            92% 85%,
            58% 68%,
            80% 100%,
            48% 78%,
            35% 100%,
            42% 70%,
            5% 95%,
            28% 62%,
            -2% 75%,
            25% 48%,
            5% 35%,
            38% 32%,
            15% 2%,
            42% 28%
        );

        opacity: 0.2;
        transform: translate(10px, -10px);

        z-index: -1;

        animation: glitchHoofd 0.8s steps(4) infinite;
    }

    @keyframes glitchHoofd{

        0%, 85%, 100%{
            transform: scale(1) translate(0,0);
        }

        86%{
            transform: scale(1.3, 0.8) translate(-5px, 2px);
        }

        88%{
            transform: scale(0.8, 1.3) translate(5px, -2px);
        }

        90%{
            transform: scale(1.1) translate(-3px, 3px);
        }

        92%{
            transform: scale(1);
        }

    }

    /* Glitch */
    main > section:nth-of-type(2){
        animation: glitchShake 2s infinite;
    }

    @keyframes glitchShake{

        0%, 90%, 100%{ 
            transform: translate(0,0); 
        }

        92%{ 
            transform: translate(-5px, 3px); 
        }

        94%{ 
            transform: translate(5px, -3px); 
        }

        96%{ 
            transform: translate(-3px, -5px); 
        }

        98%{ 
            transform: translate(3px, 5px); 
        }

    }

}

/* ----------------  Container Style Queries combinaties ------------- */
/* Knoppen 1 of 2 of 3 of 4*/
@container style(--dizzy:pressed) or style(--evil:pressed) or style(--defect:pressed) or style(--failing:pressed){

    /* H2 niet laten zien */
    body:has(footer [type="radio"]:checked) header h2{
        display: none;
    }

    /* Tekst 'my name?' niet laten zien */
    footer > p:nth-of-type(2){
        display: none;
    }

}

/* Knoppen 1 + 2 */
@container style(--dizzy:pressed) and style(--evil:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "This is getting silly";
        color: white;
    }

    /* ------------- Achtergrond ------------- */
    body{
        --color-star: #F4574C;

        animation: achtergrondtrillenEnKleur 5s infinite;
    }

    @keyframes achtergrondtrillenEnKleur{

        0%{
            background-color: #000435;
        }

        10%{
            background-color: #0a0f5c;
        }

        20%{
            background-color: #1a0066;
        }

        30%{
            background-color: #3b0088;
        }

        40%{
            background-color: #5f00a8;
        }

        50%{
            background-color: #2e8b57; 
        }

        60%{
            background-color: #6b8e23;
        }

        70%{
            background-color: #8b0000; 
        }

        80%{
            background-color: #4b0000; 
        }

        90%{
            background-color: #1a0000;
        }

        100%{
            background-color: #000000;
        }

    }

    /* ------------- Special ------------- */
    main > section > aside + div{
        animation: misselijkGroenEnEvil 2s linear infinite !important;
    }

    @keyframes misselijkGroenEnEvil{

        0%{
            --color-star: #B5C306;
            filter: brightness(1);
        }

        20%{
            --color-star: #B6C406;
        }

        40%{
            --color-star: #D4D977;
        }

        60%{
            --color-star: #FFF000;
            filter: brightness(1.4);
        }

        80%{
            --color-star: #D4D977;
        }

        100%{
            --color-star: #B5C306;
            filter: brightness(1);
        }

    }

}

/* Knoppen 1 + 3 */
@container style(--dizzy:pressed) and style(--failing:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Careful now";
        color: white;
    }

    /* ------------- Achtergrond ------------- */
    body{
        background: linear-gradient(90deg, red, white, red, white);
        background-size: 200% 200%;
        
        animation: gradientAchtergrondEnShakeScherm 0.3s steps(6) infinite !important;
        filter: blur(1px) contrast(120%);
        overflow-x: hidden;
    }

    @keyframes gradientAchtergrondEnShakeScherm{

        0% {
            background-position: 0% 50%;
            transform: translate(0, 0);
            filter: brightness(1);
        }

        25%{ 
            transform: translate(-3px, 2px); 
        }

        50%{ 
            transform: translate(3px, -2px); 
            filter: brightness(1.3);
        }

        75%{ 
            transform: translate(-2px, -3px); 
        }

        100% {
            background-position: 100% 50%;
            transform: translate(2px, 3px);
            filter: brightness(1);
        }
    
    }

    /* ------------- Silly Walk ------------- */
    main > section:first-child{
        position: relative;
        transform-origin: 50% 100px;
    }

    main:has(section:first-child label:nth-child(1) input:checked) > section:nth-of-type(2){
        animation: rondDraaienFailing 2s linear infinite;
    }

    @keyframes rondDraaienFailing{

        0%{
            transform: rotate(0deg);
        }

        100%{
            transform: rotate(-360deg);
        }

    }

    /* ------------- Special ------------- */
    main > section > aside + div{
        animation: misselijkFailing 1s linear infinite !important;
    }

    @keyframes misselijkFailing{

        0%{
            --color-star: #B5C306;
            filter: brightness(1);
        }

        20%{
            --color-star: #B6C406;
        }

        40%{
            --color-star: #D4D977;
        }

        60%{
            --color-star: #FFF000;
            filter: brightness(1.4);
        }

        80%{
            --color-star: #D4D977;
        }

        100%{
            --color-star: #B5C306;
            filter: brightness(1);
        }

    }

}

/* Knoppen 1 + 4 */
@container style(--dizzy:pressed) and style(--defect:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "That's not normal. I checked";
        color: white;
    }

    /* ------------- Achtergrond ------------- */
    body::after{
        content: "";
        position: fixed;
        inset: -25%;

        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 3px,
            black 4px
        );

        pointer-events: none;
        opacity: 0.25;

        animation: scanlines 0.2s linear infinite, achtergrondDizzyEnDefect 5s infinite;

        z-index: -1;
    }

    @keyframes achtergrondDizzyEnDefect{

        0%{ 
            transform: rotate(0deg) scale(1); 
        }

        25%{ 
            transform: rotate(1deg) scale(1.02); 
        }

        50%{ 
            transform: rotate(-1.5deg) scale(1.01); 
        }

        75%{ 
            transform: rotate(1deg) scale(1.03); 
        }

        100%{ 
            transform: rotate(0deg) scale(1); 
        }

    }

    /* ------------- Special ------------- */
    /* Verliest geen been */
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: none;
    }            

}

/* Knoppen 2 + 3 */
@container style(--evil:pressed) and style(--failing:pressed){

    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Congratulations, you made it worse";
        color: white;
    }

    /* ------------- Achtergrond ------------- */
    body{
        background: linear-gradient(90deg, #000435, white, #000435, white);
        background-size: 200% 200%;

        animation: gradientAchtergrondEnShakeScherm 0.3s steps(6) infinite;
    }

}

/* Knoppen 2 + 4 */
@container style(--evil:pressed) and style(--defect:pressed){

    /* ---------------Titel------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Shrubbery.";
        color: white;
    }

    /* ---------------Achtergrond------------- */
    body{
        --color-main-background: #000435;
        background-color: var(--color-main-background);
    }

    body::after{
        content: "";
        position: fixed;
        inset: 0;

        width: 150vw;
        height: 150vh;

        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 3px,
            white 4px
        );

        pointer-events: none;
        animation: scanlines 0.2s linear infinite;
        opacity: 0.4;

        z-index: -1;
    }

    @keyframes scanlines{

        0%{ 
            transform: translateY(0); 
        }

        100%{ 
            transform: translateY(10px); 
        }

    }    

}

/* Knoppen 3 + 4 */
@container style(--failing:pressed) and style(--defect:pressed){
    
    /* ---------------Titel------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "This has gone terribly wrong.";
        color: white;
    }

    /* ---------------Silly Walk------------- */
    /* Loopt uit beeld */
    section:nth-of-type(2){
        animation: loopVanSchermDefect 5s linear infinite !important;
    }

    @keyframes loopVanSchermDefect{

        0%{ 
            transform: translateX(-100vw) rotate(0deg); 
        }

        20%{ 
            transform: translateX(80vw) rotate(10deg); 
        }

        40%{ 
            transform: translateX(-60vw) rotate(-8deg); 
        }

        60%{ 
            transform: translateX(100vw) rotate(12deg); 
        }

        80%{ 
            transform: translateX(-90vw) rotate(-10deg); 
        }

        100%{ 
            transform: translateX(100vw) rotate(0deg); 
        }

    }

    /* Verliest geen been */
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: none;
    }     

}

/* Knoppen 1 + 2 + 3 */
@container style(--dizzy:pressed) and style(--evil:pressed) and style(--failing:pressed){
        
    /* ---------------Titel------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Everything is fine... everything is fine...";
        color: white;
    }

    /* ---------------Achtergrond------------- */
    body{
        background: linear-gradient(90deg, red, white, red, white);
        background-size: 200% 200%;
        
        animation: achtergrondDizzyEvilFailing 0.3s steps(6) infinite;
        filter: blur(1px) contrast(120%);
    }

    @keyframes achtergrondDizzyEvilFailing{

        0% {
            background-position: 0% 50%;
            transform: translate(0, 0), rotate(0deg);
            filter: brightness(1);
        }

        25%{ 
            transform: translate(-3px, 2px), rotate(-4deg); 
        }

        50%{ 
            transform: translate(3px, -2px), rotate(4deg); 
            filter: brightness(1.3);
        }

        75%{ 
            transform: translate(-2px, -3px), rotate(-3deg);
        }

        100% {
            background-position: 100% 50%;
            transform: translate(2px, 3px), rotate(360deg);
            filter: brightness(1);
        }
    
    }

}

/* Knoppen 1 + 2 + 4 */
@container style(--dizzy:pressed) and style(--evil:pressed) and style(--defect:pressed){

    /* ---------------Titel------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Please remain calm.";
        color: white;
    }

    /* ---------------Achtergrond------------- */
    body{
        --color-main-background: #000435;
        background-color: var(--color-main-background);
    }

    body::after{
        content: "";
        position: fixed;
        inset: 0;

        width: 150vw;
        height: 150vh;

        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 3px,
            white 4px
        );

        pointer-events: none;
        animation: lijnenCombi 0.1s linear infinite;
        opacity: 0.4;

        z-index: -1;
    }

    @keyframes lijnenCombi{

        0%{ 
            transform: translateY(0); 
        }

        100%{ 
            transform: translateY(1px); 
        }

    }

    /* ------------- Silly Walk ------------- */
    /* Agressiever */
    section:nth-of-type(2) div{
        animation: meerTrillen 0.2s infinite;
    }

    @keyframes meerTrillen{

        0%{ 
            transform: translateY(0px); 
        }

        50%{ 
            transform: translateY(-2px); 
        }

        100%{ 
            transform: translateY(0px); 
        }

    }

    /* Linkerbeen */
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: linksBeen 1.2s infinite linear;
    }

    @keyframes linksBeen{

        0%{
            transform: rotate(-45deg);
        }

        40%{
            transform: rotate(50deg);
        }

        55%{
            transform: rotate(30deg);
        }

        100%{
            transform: rotate(-45deg);
        }

    }

    /* Rechterbeen */
    section:nth-of-type(2) > div:last-child > div:last-child{
        animation: rechtsBeen 1.2s infinite linear;
    }

    @keyframes rechtsBeen{

        0%{
            transform: rotate(45deg);
        }

        40%{
            transform: rotate(-50deg);
        }

        55%{
            transform: rotate(-30deg);
        }

        100%{
            transform: rotate(45deg);
        }

    }

    /* Knie */
    section:nth-of-type(2) > div:last-child > div > div{
        animation: evilKnie 0.6s infinite linear;
        transform-origin: top;
    }

    @keyframes evilKnie{

        0%{
            transform: rotate(0deg);
        }

        50%{
            transform: rotate(70deg);
        }

        100%{
            transform: rotate(0deg);
        }

    }

    /* Voet links */
    section:nth-of-type(2) > div:last-child > div > div > div{
        animation: linkerVoet 0.8s infinite ease-in-out;
        transform-origin: top center;
    }

    @keyframes linkerVoet{

        0%{
            transform: rotate(25deg);
        }

        50%{
            transform: rotate(-25deg);
        }

        100%{
            transform: rotate(25deg);
        }

    }

    /* Voet rechts */
    section:nth-of-type(2) > div:last-child > div:last-child > div > div{
        animation: rechterVoet 0.8s infinite ease-in-out;
        transform-origin: top center;
    }

    @keyframes rechterVoet{

        0%{
            transform: rotate(-25deg);
        }

        50%{
            transform: rotate(25deg);
        }

        100%{
            transform: rotate(-25deg);
        }

    }

    /* Heen en weer lopen */
    section:nth-of-type(2){
        animation: basisLoopjeCombi 6s linear infinite;
    }

    @keyframes basisLoopjeCombi{

        0%{
            transform: translateX(-10px);
        }

        50%{
            transform: translateX(60px);
        }

        100%{
            transform: translateX(-10px);
        }

    }
}

/* Knoppen 1 + 3 + 4 */
@container style(--dizzy:pressed) and style(--failing:pressed) and style(--defect:pressed){
    
    /* ------------- Titel ------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "This is all perfectly under control.";
        color: white;
    }

}

/* Knoppen 2 + 3 + 4 */
@container style(--evil:pressed) and style(--failing:pressed) and style(--defect:pressed){
        
    /* ---------------Titel------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "Reality is currently unavailable.";
        color: white;
    }

    /* ---------------Achtergrond------------- */
    body{
        background: linear-gradient(90deg, red, white, red, white);
        background-size: 200% 200%;
        
        animation: achtergrondDefectEvilFailing 0.3s steps(6) infinite;
        filter: blur(1px) contrast(120%);
    }

    @keyframes achtergrondDefectEvilFailing{

        0% {
            background-position: 0% 50%;
            transform: translate(0, 0);
            filter: brightness(1);
        }

        25%{ 
            transform: translate(-3px, 2px); 
        }

        50%{ 
            transform: translate(3px, -2px); 
            filter: brightness(1.3);
        }

        75%{ 
            transform: translate(-2px, -3px); 
        }

        100% {
            background-position: 100% 50%;
            transform: translate(2px, 3px);
            filter: brightness(1);
        }

    }
}

/* Knoppen 1 + 2 + 3 + 4 */
@container style(--dizzy:pressed) and style(--evil:pressed) and style(--failing:pressed) and style(--defect:pressed){
    
    /* ---------------Titel------------- */
    header span:nth-of-type(1){
        color: transparent;
    }

    header span:nth-of-type(1)::after{
        content: "What did you do?";
        color: white;
    }

    /* ---------------Monty Phyton Foot------------- */
    /* Algemene styling */
    /* Interactieknoppen weg */
    main > section > label{
        display: none;
    }

    body{
        height: 100vh;

        background-image: radial-gradient(circle at center center, white, red), repeating-radial-gradient(circle at center center, #444cf7, #444cf7, 9px, transparent 18px, transparent 9px);
        background-blend-mode: multiply;
        opacity: 1;

        filter: brightness(1);
        animation: draaiendeAchtergrond 5s infinite,
        stopDizzy 0.1s forwards !important;

        /* Monty Phyton voet */
        img{
            display: block;

            position: fixed;
            top: -90vh;
            left: 50%;
            transform: translateX(-50%) scale(1.8);
            z-index: 10;

            animation: voetValt 1.5s forwards;
        }
    }

    @keyframes draaiendeAchtergrond{

        0%{
            background-color: steelblue;
            transform: rotate(0deg);
        }

        10%{
            background-color: red;
            transform: rotate(3deg);
        }

        20%{
            background-color: orange;
            transform: rotate(-4deg);
        }

        30%{
            background-color: yellow;            
            transform: rotate(6deg);
        }

        40%{
            background-color: green;
            transform: rotate(-5deg);
        }

        50%{
            background-color: blue;
            transform: rotate(4deg);
        }

        60%{
            background-color: indigo;
            transform: rotate(-6deg);
        }

        70%{
            background-color: violet;
            transform: rotate(5deg);
        }

        80%{
            background-color: pink;
            transform: rotate(-3deg);
        }

        90%{
            background-color: brown;
            transform: rotate(2deg);
        }

        100%{
            background-color: steelblue;
            transform: rotate(0deg);
        }

    }

    @keyframes stopDizzy{

        0%{
            transform: rotate(3deg);
        }

        50%{
            transform: rotate(-2deg);
        }

        100%{
            transform: rotate(0deg);
            background-color: steelblue;
        }
    }

    /* Monty Phyton voet */
    @keyframes voetValt{

        0%{
            top: -60vh;
            transform: translateX(-50%) scale(1.8);
        }

        60%{
            top: 45vh;
            transform: translateX(-50%) scale(2);
        }

        70%{
            top: 40vh;
            transform: translateX(-50%) scale(1.7);
        }

        100%{
            top: -80vh;
            transform: translateX(-50%) scale(1.8);
        }
    }

    /* Ster plat */
    section:nth-of-type(2){
        animation: none !important;
        transform: translateX(0);
    }

    main{
        transform-origin: center bottom;

        animation: sterPlat 0.3s ease-out forwards;
        animation-delay: 0.15s;
    }

    @keyframes sterPlat{

        0%{
            transform: translateX(0) translateY(0) scale(1);
        }

        40%{
            transform: translateX(0) translateY(20px) scaleX(1.1) scaleY(0.7);
        }

        60%{
            transform: translateX(0) translateY(35px) scaleX(1.35) scaleY(0.35);
        }

        70%{
            transform: translateX(0) translateY(30px) scaleX(1.3) scaleY(0.4);
        }

        80%{
            transform: translateX(0) translateY(28px) scaleX(1.25) scaleY(0.45);
        }

        100%{
            transform: translateX(0) translateY(30px) scaleX(1.3) scaleY(0.4);
        }
    }

    /* Geen bewegende benen */
    section:nth-of-type(2) > div:last-child > div:last-child > div > div,
    section:nth-of-type(2) > div:last-child > div > div > div,
    section:nth-of-type(2) > div:last-child > div > div,
    section:nth-of-type(2) > div:last-child > div:last-child,
    section:nth-of-type(2) > div:last-child > div:first-child{
        animation: none;
    }

    /* Na val voet */
    /* Titel weg */
    header{
        animation: titelVerdwijn 1.5s linear forwards !important;
        animation-delay: 1.5s;
    }

    @keyframes titelVerdwijn{

        0%{
            visibility: visible;
        }

        100%{
            visibility: hidden;
        }
    }

    /* Alles wit */
    html::after{
        content: "This was not meant to happen.";
        position: fixed;
        inset: 0;

        display: grid;
        place-items: center;

        background: white;

        font-size: clamp(0.8rem, 4vw, 1.5rem);
        font-weight: 600;
        text-align: center;

        opacity: 0;
        pointer-events: none;
        z-index: 999;

        animation: whiteOut 0s forwards;

        animation-delay: 1.65s;
    }

    @keyframes whiteOut{
        to{
            opacity: 1;
        }
    }
}

}

/* Pff */