/**********************/
/** MARK: VARIABELEN **/
/**********************/
:root {
    --kroon-kleur: #ff7af4;
    --gezicht-ronding: 50px 50px 40px 40px;
    --huid-kleur: #fff4e6;
    --jurk-kleur: rgb(25, 93, 93);
    --kleding-kleur-donker: rgb(18, 67, 67);
    --vorm-kleur: red;
    --haar-kleur: #dea844;
    --rand-kaart: #e4c197;
    --midden-kaart: #f2dbbf;
    --gezicht: 0;
    --nacht: 0;
    --misselijkmakend: 0;
}

@font-face {
    font-family: 'Texturina';
    src: url('../fonts/texturina.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/*************************/
/** MARK: BASIS STYLING **/
/*************************/
body {
    background-color: var(--jurk-kleur);
    margin: 0;
    padding: 50px;
    font-family: sans-serif;
    --opgeteld: calc(var(--gezicht) + var(--nacht));
    overflow: hidden;
}

main {
    display: flex;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    left: 32px;
    top: 30px;
}

/* basisregels: mogen overschreven worden door latere css */
@layer basis {
    article, section, figure, aside, header, footer, b,
    strong, i, em, u, s, span, small, mark, q, sub, sup, ul,
    ol, li, dl, dt, dd {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        font-weight: normal;
        font-style: normal;
        box-sizing: border-box;
        background-color: transparent;
    }
}

/***********************/
/** MARK: EASTER EGGS **/
/***********************/
/* barrel roll */
body>input:nth-of-type(1) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

html:has(body > input:nth-of-type(1):checked) main>article {
    animation: barrel-roll 2s ease-in-out;
}

@keyframes barrel-roll {
    0% {
        transform: rotate(4deg);
    }

    50% {
        transform: rotate(364deg) scale(1.2);
    }

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

/*****************************/
/** MARK: ACHTERGROND TEKST **/
/*****************************/
/* wrapper achtergrond tekst (ul) */
body>ul:nth-of-type(1) {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    transform: rotate(-15deg);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    &>li {
        &:nth-child(odd) {
            animation: schuif-links var(--tekst-snelheid, 40s) linear infinite alternate;
        }

        &:nth-child(even) {
            animation: schuif-rechts var(--tekst-snelheid, 40s) linear infinite alternate;

            &::before {
                animation-delay: -1s;
            }
        }

        &::before {
            content: "QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN QUEEN ";
            font-family: 'Texturina', serif;
            font-size: 120px;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.2);
            white-space: nowrap;
            display: block;
            animation: hobbel-tekst 1s ease-in-out infinite alternate;
        }
    }
}

/* als koning aan (label 4) */
html:has(main > nav form label:nth-of-type(4) input:checked) body>ul:nth-of-type(1)>li::before {
    content: "KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING KING ";
    color: rgba(255, 255, 255, 0.2);
}

@keyframes schuif-links {
    0% {
        translate: 0 0;
    }

    100% {
        translate: -15% 0;
    }
}

@keyframes schuif-rechts {
    0% {
        translate: -15% 0;
    }

    100% {
        translate: 0 0;
    }
}

@keyframes hobbel-tekst {
    0% {
        transform: translateY(0px);
        font-variation-settings: "wght"100, "opsz"12;
    }

    100% {
        transform: translateY(-30px);
        font-variation-settings: "wght"900, "opsz"72;
    }
}


/************************/
/** MARK: CONTROL CARD **/
/************************/
/* de control kaart */
main>nav {
    width: 400px;
    height: 600px;
    background-color: var(--rand-kaart);
    border: 12px solid black;
    border-radius: 20px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    translate: -7% -1%;
    rotate: -4deg;
    transform-origin: bottom center;
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* css architecture: nesting (hover) */
    &:hover {
        translate: -32% -1%;
        rotate: -10deg;

        &~article {
            translate: 18% -1%;
            rotate: 5deg;
        }
    }

    /* control canvas */
    &>section {
        width: 320px;
        height: 510px;
        background-color: var(--midden-kaart);
        border: 8px solid black;
        position: absolute;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 30px;
        box-sizing: border-box;

        /* controls grid */
        &>form {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            place-items: center;
        }

        /* de misselijk slider (label 3) */
        &>label:has(input[type="range"]):nth-of-type(3) {
            display: none;
        }
    }
}

/* checkboxes & knoppen */
input[type="checkbox"] {
    display: none;
}

label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 0 10px 0;
    background-color: #ffffff;
    border: 3px solid black;
    border-radius: 12px;
    cursor: pointer;
    font-size: 24px;
    user-select: none;
    box-shadow: 4px 6px 0px black;
    transition: all 0.1s ease-out;
}

label:has(input[type="checkbox"]):hover {
    background-color: #f0f0f0;
    transform: translate(2px, 2px);
    box-shadow: 2px 4px 0px black;
}

label:has(input[type="checkbox"]:checked) {
    transform: translate(4px, 6px);
    box-shadow: 0px 0px 0px black;
    background-color: var(--jurk-kleur);
    border-color: black;
}

/* sliders algemeen */
label:has(input[type="range"]) {
    display: flex;
    flex-direction: column;
}

/* de misselijk slider (label 3) */
main>nav>section>label:has(input[type="range"]):nth-of-type(3) {
    display: none;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    background: transparent;
    margin: 15px 0;
    cursor: pointer;

    &:focus {
        outline: none;
    }

    &::-webkit-slider-runnable-track {
        width: 100%;
        height: 14px;
        background-color: #ffffff;
        border: 3px solid black;
        border-radius: 10px;
        box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1);
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 28px;
        width: 28px;
        background-color: var(--jurk-kleur);
        border: 3px solid black;
        border-radius: 50%;
        margin-top: -10px;
        box-shadow: 2px 3px 0px black;
        transition: transform 0.1s ease, box-shadow 0.1s ease;

        &:hover {
            transform: scale(1.1);
        }

        &:active {
            transform: scale(0.95) translateY(2px);
            box-shadow: 0px 0px 0px black;
        }
    }
}

/**********************/
/** MARK: QUEEN CARD **/
/**********************/
/* de kaart (article) */
main>article {
    width: 400px;
    height: 600px;
    background-color: var(--rand-kaart);
    border: 12px solid black;
    border-radius: 20px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transform: rotate(4deg);
    transform-origin: bottom center;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* het canvas */
main>article>section {
    width: 304px;
    height: 493px;
    background-color: color-mix(in srgb, #1a1a3a calc(var(--nacht) * 1%), var(--midden-kaart));
    transition: background-color 0.1s linear;
    border: 8px solid black;
    position: absolute;
    overflow: hidden;
}

/* bovenste en onderste helft */
main>article>section>section:nth-of-type(1) {
    top: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

main>article>section>section:nth-of-type(2) {
    bottom: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    transform: rotate(180deg);
}

/* tekening schaal (figure) */
main>article>section>section>figure {
    width: 100%;
    height: 510px;
    position: absolute;
    top: 0;
    left: 24px;
    transform-origin: top center;
    transform: scale(0.7);

    /* icoon groot (b in aside) */
    &>aside>b {
        background-color: var(--vorm-kleur);
        width: 80px;
        height: 80px;
        clip-path: shape(from 50% 91%, line to 90% 50%, arc to 50% 9% of 1%, arc to 10% 50% of 1%);
        position: absolute;
        top: 66px;
        left: -35px;
    }

    &>article {

        /* kroon koningin (header 1) */
        &>header:nth-of-type(1) {
            width: 80px;
            height: 61px;
            top: 41px;
            left: 114px;
            background-color: var(--kroon-kleur);
            position: absolute;
            z-index: 11;
            transition: all 0.5s ease;
            clip-path: polygon(0% 0%, 20% 100%, 80% 100%, 100% 0%, 75% 40%, 50% 10%, 25% 40%);
            transform-origin: center center;
        }

        /* kroon koning (header 2) */
        &>header:nth-of-type(2) {
            display: none;
            width: 80px;
            height: 73px;
            top: 41px;
            left: 114px;
            background-color: var(--kroon-kleur);
            position: absolute;
            z-index: 11;
            transition: all 0.5s ease;
            clip-path: polygon(0% 0%, 10% 100%, 90% 100%, 100% 0%, 75% 40%, 50% 10%, 25% 40%);
            transform-origin: center center;
        }

        /* emoji misselijk (span 1 en 2 in header) */
        &>header>span:nth-of-type(1) {
            display: none;
            position: absolute;
            top: 14px;
            left: 20px;
            font-size: 37px;
            z-index: 100;
        }

        &>header>span:nth-of-type(2) {
            display: none;
            position: absolute;
            top: 14px;
            left: 18px;
            font-size: 40px;
            z-index: 100;
        }

        /* haar koningin (aside 1) */
        &>aside:nth-of-type(1) {
            position: absolute;
            width: 64px;
            height: 138px;
            clip-path: polygon(69% 17%, 100% 10%, 100% 81%, 87% 78%, 50% 88%, 47% 38%);
            top: 87px;
            left: 67px;
            background-color: var(--haar-kleur);
            transform: rotate(1deg);
        }

        /* haar koning (aside 2) */
        &>aside:nth-of-type(2) {
            display: none;
            position: absolute;
            width: 131px;
            height: 100px;
            clip-path: polygon(25% 0%, 75% 0%, 90% 16%, 85% 44%, 18% 44%, 9% 22%);
            top: 101px;
            left: 89px;
            background-color: var(--haar-kleur);
            transform: rotate(1deg);
        }

        /* hoofd (ul) */
        &>ul {
            width: 70px;
            height: 112px;
            top: 92px;
            left: 118px;
            background-color: var(--huid-kleur);
            border: 4px solid black;
            border-radius: 50px 50px 40px 40px;
            position: absolute;
            z-index: 10;
            transition: all 0.3s ease;

            /* oog (li 1) */
            &>li:nth-of-type(1) {
                display: block;
                width: 20px;
                height: 10px;
                border-bottom: 3px solid black;
                border-radius: 50%;
                position: absolute;
                top: 28px;
                right: 14px;
            }

            /* wimpers (li 2 t/m 5) */
            &>li:nth-of-type(2) {
                z-index: 100;
                position: absolute;
                background-color: black;
                border-radius: 40%;
                height: 11px;
                width: 2px;
                top: 37px;
                right: 29px;
                transform: rotate(15deg);
            }

            &>li:nth-of-type(3) {
                z-index: 100;
                position: absolute;
                background-color: black;
                border-radius: 40%;
                height: 11px;
                width: 2px;
                top: 37px;
                right: 25px;
                transform: rotate(9deg);
            }

            &>li:nth-of-type(4) {
                z-index: 100;
                position: absolute;
                background-color: black;
                border-radius: 40%;
                height: 11px;
                width: 2px;
                top: 37px;
                right: 20px;
                transform: rotate(-5deg);
            }

            &>li:nth-of-type(5) {
                z-index: 100;
                position: absolute;
                background-color: black;
                border-radius: 40%;
                height: 11px;
                width: 2px;
                top: 36px;
                right: 16px;
                transform: rotate(-10deg);
            }

            /* wenkbrauw (li 6) */
            &>li:nth-of-type(6) {
                display: none;
                position: absolute;
                height: 22px;
                width: 31px;
                top: 24px;
                left: 33px;
                background-color: var(--haar-kleur);
                clip-path: polygon(25% 0%, 75% 0%, 90% 16%, 9% 22%);
            }

            /* baard (li 7) */
            &>li:nth-of-type(7) {
                display: none;
                position: absolute;
                width: 97px;
                height: 109px;
                top: 89px;
                left: -13px;
                background-color: var(--haar-kleur);
                clip-path: polygon(10% 0%, 90% 0%, 100% 30%, 80% 70%, 50% 100%, 20% 70%, 0% 30%);
                z-index: 5;
            }

            /* mond (checkbox) */
            &>input {
                -webkit-appearance: none;
                appearance: none;
                display: block !important;
                width: 12px;
                height: 8px;
                background-color: red;
                border: 2px solid black;
                border-radius: 50%;
                position: absolute;
                bottom: 17px;
                left: 27px;
                cursor: pointer;
                z-index: 50;
                transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

                &:checked {
                    height: 18px;
                    bottom: 12px;
                    background-color: black;
                    border-radius: 40% 40% 60% 60%;
                }
            }
        }

        /* kek (s) */
        &>s {
            position: absolute;
            background-color: var(--huid-kleur);
            border: 4px solid black;
            border-radius: var(--gezicht-ronding);
            height: 56px;
            width: 29px;
            top: 189px;
            left: 141px;
        }

        /* jurk (figure 1) */
        &>section>figure:nth-of-type(1) {
            position: absolute;
            width: 160px;
            height: 173px;
            top: 230px;
            left: 80px;
            clip-path: polygon(25% 0%, 75% 0%, 60% 50%, 100% 100%, 0 100%, 40% 50%);
            background-color: var(--jurk-kleur);
        }

        /* mantel (figure 2) */
        &>section>figure:nth-of-type(2) {
            position: absolute;
            width: 160px;
            height: 173px;
            top: 230px;
            left: 80px;
            background-color: var(--jurk-kleur);
            display: none;
            clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 20%, 85% 100%, 15% 100%, 0% 20%);
        }

        /* armen koningin (footer 1 en 3) */
        &>footer:nth-of-type(1) {
            position: absolute;
            width: 16px;
            height: 71px;
            top: 230px;
            left: 102px;
            border-radius: 25%;
            background-color: var(--jurk-kleur);
            transform: rotate(27deg);

            &>b {
                position: absolute;
                width: 16px;
                height: 57px;
                top: 63px;
                left: 12px;
                transform: rotate(152deg);
                border-radius: 25%;
                border: 2px solid black;
                background-color: var(--huid-kleur);
            }
        }

        &>footer:nth-of-type(3) {
            position: absolute;
            width: 16px;
            height: 71px;
            top: 230px;
            left: 189px;
            border-radius: 25%;
            background-color: var(--jurk-kleur);

            &>b {
                position: absolute;
                width: 16px;
                height: 57px;
                top: 33px;
                left: 21px;
                transform: rotate(61deg);
                border-radius: 25%;
                border: 2px solid black;
                background-color: var(--huid-kleur);

                /* bloem genest in de b! */
                &>i>figure {
                    position: absolute;
                    width: 5px;
                    height: 51px;
                    top: -36px;
                    left: -15px;
                    transform: rotate(123deg);
                    border: 2px solid black;
                    border-radius: 25%;
                    background-color: green;

                    &>ul {
                        position: absolute;
                        width: 5px;
                        height: 5px;
                        top: 50px;
                        left: 0px;
                        transform: scale(2.5);

                        &>ol {
                            position: absolute;
                            width: 5px;
                            height: 5px;
                            top: 0;
                            left: 0;

                            &>li {
                                position: absolute;
                                width: 3px;
                                height: 8px;
                                border: 0.2px solid black;
                                border-radius: 15% 85% 24% 76% / 26% 52% 48% 74%;

                                &:nth-of-type(1) {
                                    top: 7px;
                                    left: -4px;
                                    background-color: #cc00ff;
                                    transform: scale(2) rotate(45deg);
                                }

                                &:nth-of-type(2) {
                                    top: 0px;
                                    left: -9px;
                                    background-color: #ff8400;
                                    transform: scale(2) rotate(100deg);
                                }

                                &:nth-of-type(3) {
                                    top: -7px;
                                    left: -6px;
                                    background-color: #ff0051;
                                    transform: scale(2) rotate(140deg);
                                }

                                &:nth-of-type(4) {
                                    top: 5px;
                                    left: 6px;
                                    background-color: #bd459f;
                                    transform: scale(2) rotate(147deg);
                                }

                                &:nth-of-type(5) {
                                    top: -4px;
                                    left: 9px;
                                    background-color: #ff9900;
                                    transform: scale(2) rotate(82deg);
                                }

                                &:nth-of-type(6) {
                                    top: -10px;
                                    left: 4px;
                                    background-color: #a170e6;
                                    transform: scale(2) rotate(31deg);
                                }
                            }
                        }

                        &>em {
                            position: absolute;
                            width: 5px;
                            height: 5px;
                            top: 0;
                            left: 0;
                            border: 1px solid black;
                            border-radius: 100%;
                            background-color: yellow;
                            z-index: 2;
                        }
                    }
                }
            }
        }

        /* armen koning (footer 2 en 4) */
        &>footer:nth-of-type(2) {
            display: none;
            position: absolute;
            width: 33px;
            height: 74px;
            top: 266px;
            left: 58px;
            border-radius: 25%;
            background-color: var(--jurk-kleur);
            transform: rotate(27deg);

            &>b {
                display: none;
                position: absolute;
                width: 33px;
                height: 57px;
                top: 63px;
                left: 12px;
                transform: rotate(152deg);
                border-radius: 25%;
                border: 2px solid black;
                background-color: var(--huid-kleur);
            }
        }

        &>footer:nth-of-type(4) {
            display: none;
            position: absolute;
            width: 33px;
            height: 74px;
            top: 266px;
            left: 230px;
            border-radius: 25%;
            background-color: var(--jurk-kleur);
            transform: rotate(341deg);

            &>b {
                display: none;
                position: absolute;
                width: 33px;
                height: 57px;
                top: 33px;
                left: 21px;
                transform: rotate(61deg);
                border-radius: 25%;
                border: 2px solid black;
                background-color: var(--huid-kleur);

                /* zwaard genest in de b! */
                &>i {
                    position: absolute;
                    width: 20px;
                    height: 120px;
                    top: -98px;
                    left: -31px;
                    transform: rotate(324deg);
                    display: none;

                    &>s {
                        position: absolute;
                        width: 23px;
                        height: 149px;
                        top: -70px;
                        left: 2px;
                        background-color: white;
                        clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%);
                    }

                    &>u {
                        position: absolute;
                        width: 41px;
                        height: 13px;
                        top: 78px;
                        left: -9px;
                        background-color: #ffd700;
                        border: 2px solid black;
                        border-radius: 4px;
                    }

                    &>q {
                        position: absolute;
                        width: 14px;
                        height: 35px;
                        top: 93px;
                        left: 4px;
                        background-color: #8b4513;
                        border: 2px solid black;
                    }
                }
            }
        }
    }
}

/* de snelweg */
main>article>section>aside {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 25px;
    background-color: #222;
    z-index: 50;
    transform: translateY(-50%);

    &>s {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 4px;
        background-image: linear-gradient(to right, white 50%, transparent 50%);
        background-size: 40px 4px;
        transform: translateY(-50%);
    }

    &>input[type="checkbox"] {
        display: block;
        -webkit-appearance: none;
        appearance: none;
        position: absolute;
        width: 8px;
        height: 3px;
        top: 8px;
        left: 80px;
        background-color: white;
        cursor: pointer;
        z-index: 100;
    }

    &>mark {
        position: absolute;
        font-size: 20px;
        display: none;

        &:nth-of-type(1) {
            top: -14px;
            left: -40px;
            transform: scaleX(-1);
        }

        &:nth-of-type(2) {
            bottom: -14px;
            right: -40px;
            transform: scaleY(-1);
        }
    }
}

/* easter egg (witte streepje op de snelweg) */
html:has(main > article > section > aside > input:checked) main>article>section {
    background: linear-gradient(90deg, rgba(0, 255, 221, 1) 0%, rgba(0, 255, 221, 1) 10%, rgba(255, 204, 0, 1) 10%, rgba(255, 204, 0, 1) 20%, rgba(255, 0, 195, 1) 20%, rgba(255, 0, 195, 1) 30%, rgba(255, 204, 0, 1) 30%, rgba(255, 204, 0, 1) 40%, rgba(0, 255, 221, 1) 40%, rgba(0, 255, 221, 1) 50%, rgba(255, 0, 195, 1) 50%, rgba(255, 0, 195, 1) 60%, rgba(0, 255, 221, 1) 60%, rgba(0, 255, 221, 1) 70%, rgba(255, 204, 0, 1) 70%, rgba(255, 204, 0, 1) 80%, rgba(255, 0, 195, 1) 80%, rgba(255, 0, 195, 1) 90%, rgba(0, 255, 221, 1) 90%, rgba(0, 255, 221, 1) 100%);
}

/* nacht filters */
main>article>section>section>figure>article>header:nth-of-type(1),
main>article>section>section>figure>aside {
    filter: drop-shadow(0 0 calc(var(--nacht) * 0.2px) rgba(255, 255, 0, calc(var(--nacht) / 100)));
}

main>article>section>aside>mark::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 15px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 100, 0.8));
    filter: blur(2px);
    border-radius: 50%;
    opacity: calc(var(--nacht) / 100);
    pointer-events: none;
}

main>article>section>aside>mark:nth-of-type(1)::after {
    top: 5px;
    left: -75px;
}

main>article>section>aside>mark:nth-of-type(2)::after {
    top: 5px;
    right: 17px;
}

/**************************/
/** MARK: RESPONSIVENESS **/
/**************************/
@media (max-width: 768px) {

    main>article,
    main>nav {
        transform: scale(0.7);
    }
}

@media (max-width: 580px) {

    main>article,
    main>nav {
        transform: scale(0.6);
    }

    main>nav:hover {
        translate: -14% -34%;
        rotate: 5deg;
    }

    main>nav:hover~article {
        translate: 0% 4%;
        rotate: -4deg;
    }
}

@media (max-width: 375px) {

    main>article,
    main>nav {
        transform: scale(0.55);
    }

    main>nav:hover {
        translate: -5% -51%;
        rotate: 5deg;
    }

    main>nav:hover~article {
        translate: 0% 0%;
        rotate: -4deg;
    }
}


/**************************************/
/** MARK: MEDIA QUERIES & CONTAINERS **/
/**************************************/

/* gezichtronding */
@container style(--gezicht: 50) {
    main>article>section>section>figure>article>ul {
        border-radius: 25px;
    }
}

@container style(--gezicht: 100) {
    main>article>section>section>figure>article>ul {
        border-radius: 0px;
    }
}

/* kroon (label 1) */
html:has(main > nav form label:nth-of-type(1) input:checked) {
    --kroon: true;
}

@container style(--kroon:true) {
    main>article>section>section>figure>article>header {
        animation: disco-kroon 1s linear infinite;
    }
}

@keyframes disco-kroon {
    0% {
        background-color: #ff0000;
        translate: 0 2px;
        rotate: 0deg;
    }

    16% {
        background-color: #0099ff;
        translate: -2px -1px;
        rotate: -3deg;
    }

    33% {
        background-color: #ffdd00;
        translate: 0 -4px;
        scale: 1.05;
        rotate: 0deg;
    }

    50% {
        background-color: #ff0000;
        translate: 2px -1px;
        rotate: 3deg;
    }

    66% {
        background-color: #0099ff;
        translate: 0 1px;
        rotate: 0deg;
    }

    83% {
        background-color: #ffdd00;
        translate: -1px -1px;
        rotate: -2deg;
    }

    100% {
        background-color: #00b700;
        translate: 0 2px;
        rotate: 0deg;
    }
}

/* bloem/wind (label 2) */
html:has(main > nav form label:nth-of-type(2) input:checked) {
    --wind: true;
}

@container style(--wind:true) {
    main>article>section>section>figure>article>footer:nth-of-type(3)>b>i>figure>ul {
        animation: windmolen 5s linear infinite;
    }
}

@keyframes windmolen {
    100% {
        rotate: 360deg;
    }
}

/* icoon (label 3) */
html:has(main > nav form label:nth-of-type(3) input:checked) {
    --icoon: true;
}

@container style(--icoon:true) {
    main>article>section>section>figure>aside>b {
        clip-path: polygon(48% 15%, 35% 0%, 15% 5%, 0% 25%, 0% 45%, 50% 100%, 100% 45%, 100% 25%, 85% 5%, 65% 0%, 58% 15%, 53% 35%, 63% 55%, 53% 75%, 50% 90%, 46% 75%, 56% 55%, 46% 35%);
    }
}

/* koning (label 4) */
html:has(main > nav form label:nth-of-type(4) input:checked) {
    --koning: true;
    --jurk-kleur: #1d2e51;
    --kleding-kleur-donker: #131e34;
    --kroon-kleur: #ffd700;
    --haar-kleur: #5c3a21;
    --vorm-kleur: black;
}

@container style(--koning:true) {
    main>article>section>section>figure {
        &>aside>b {
            clip-path: polygon(40% 100%, 60% 100%, 55% 80%, 53% 65%, 65% 72%, 80% 75%, 95% 65%, 100% 50%, 95% 35%, 80% 30%, 65% 35%, 58% 45%, 62% 30%, 65% 15%, 50% 0%, 35% 15%, 38% 30%, 42% 45%, 35% 35%, 20% 30%, 5% 35%, 0% 50%, 5% 65%, 20% 75%, 35% 72%, 47% 65%, 45% 80%);
            top: 60px;
        }

        &>article {

            /* verberg koningin onderdelen */
            &>footer:nth-of-type(1),
            &>footer:nth-of-type(3),
            &>aside:nth-of-type(1),
            &>header:nth-of-type(1),
            &>section>figure:nth-of-type(1),
            &>ul>li:nth-of-type(2),
            &>ul>li:nth-of-type(3),
            &>ul>li:nth-of-type(4),
            &>ul>li:nth-of-type(5) {
                display: none;
            }

            /* toon koning onderdelen */
            &>footer:nth-of-type(2),
            &>footer:nth-of-type(2)>b,
            &>footer:nth-of-type(4),
            &>footer:nth-of-type(4)>b,
            &>footer:nth-of-type(4)>b>i,
            &>aside:nth-of-type(2),
            &>header:nth-of-type(2),
            &>ul>li:nth-of-type(6),
            &>ul>li:nth-of-type(7),
            &>section>figure:nth-of-type(2) {
                display: block;
            }
        }
    }
}

/* bewegen (label 5) */
html:has(main > nav form label:nth-of-type(5) input:checked) {
    --beweeg: true;
}

@container style(--beweeg:true) {
    main>article>section>section>figure>article {
        animation: beweeg 5s linear infinite;
    }
}

@keyframes beweeg {
    0% {
        translate: 0px 0;
    }

    25% {
        translate: 40px 0;
    }

    75% {
        translate: -40px 0;
    }

    100% {
        translate: 0px 0;
    }
}

/* autos (label 6) */
html:has(main > nav form label:nth-of-type(6) input:checked) {
    --autos-rijden: true;
}

@container style(--autos-rijden: true) {
    main>article>section>aside>mark {
        display: block;
    }

    main>article>section>aside>mark:nth-of-type(1) {
        animation: rij-naar-rechts 3s linear infinite;
    }

    main>article>section>aside>mark:nth-of-type(2) {
        animation: rij-naar-links 4s linear infinite;
    }
}

@keyframes rij-naar-rechts {
    0% {
        translate: 0 0;
    }

    100% {
        translate: 400px 0;
    }
}

@keyframes rij-naar-links {
    0% {
        translate: 0 0;
    }

    100% {
        translate: -400px 0;
    }
}

/* combinaties */
@container style(--koning:true) and style(--kroon:true) {
    body {
        --kroon-kleur: #ff7300;
    }
}

@container style(--koning:true) and style(--wind:true) {
    main>article>section>section>figure>article>footer:nth-of-type(4)>b>i {
        top: -108px;
        left: 9px;
        transform-origin: 73% 112%;
        animation: hakken 1s ease-in-out infinite alternate;
    }
}

@keyframes hakken {
    0% {
        transform: rotate(300deg);
    }

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

@container style(--koning:true) and style(--icoon:true) {
    main>article>section>section>figure>aside>b {
        animation: dwarrelen 5s linear infinite alternate;
    }
}

@keyframes dwarrelen {
    0% {
        transform: translateX(0px) rotate(0deg) rotateY(0deg);
    }

    25% {
        transform: translateX(20px) rotate(20deg) rotateY(45deg);
    }

    50% {
        transform: translateX(0px) rotate(0deg) rotateY(180deg);
    }

    75% {
        transform: translateX(-20px) rotate(-20deg) rotateY(135deg);
    }

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

/* beide sliders max (spinnen & knop tonen) */
@container style(--opgeteld: calc(100 + 100)) {
    main>article>section>section>figure>article>header {
        animation: spin-kroon calc(2000ms - (var(--misselijkmakend) * 20ms)) linear infinite;
    }

    main>nav>section>label:has(input[type="range"]):nth-of-type(3) {
        display: flex;
    }
}

@keyframes spin-kroon {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}

/* misselijkheid stages */
@container style(--misselijkmakend >=50) {
    main>article>section>section>figure>article>header>span:nth-of-type(1) {
        display: block;
    }
}

@container style(--misselijkmakend: 100) {
    main>article>section>section>figure>article>header>span:nth-of-type(2) {
        display: block;
    }

    main>article>section>section>figure>article>header {
        animation: none;
        translate: 56px 30px;
        rotate: 66deg;
    }

    body,
    main>nav,
    main>nav>section,
    main>article,
    main>article>section {
        background-color: #00b700;
        transition: background-color 0.2s ease;
    }

    body>ul:nth-of-type(1)>li {
        animation: none;
    }
}

/* versnelling achtergrondtekst */
@container style(--misselijkmakend: 10) {
    body>ul>li {
        --tekst-snelheid: 18s;
    }
}

@container style(--misselijkmakend: 20) {
    body>ul>li {
        --tekst-snelheid: 14s;
    }
}

@container style(--misselijkmakend: 30) {
    body>ul>li {
        --tekst-snelheid: 9s;
    }
}

@container style(--misselijkmakend: 40) {
    body>ul>li {
        --tekst-snelheid: 5.5s;
    }
}

@container style(--misselijkmakend: 50) {
    body>ul>li {
        --tekst-snelheid: 3.8s;
    }
}

@container style(--misselijkmakend: 60) {
    body>ul>li {
        --tekst-snelheid: 2.2s;
    }
}

@container style(--misselijkmakend: 70) {
    body>ul>li {
        --tekst-snelheid: 1.2s;
    }
}

@container style(--misselijkmakend: 80) {
    body>ul>li {
        --tekst-snelheid: 0.5s;
    }
}

@container style(--misselijkmakend: 90) {
    body>ul>li {
        --tekst-snelheid: 0.15s;
    }
}