* {
    box-sizing: border-box;
}

/* Bron: Jacco heeft mij de code toegestuurd en de website vanwaar ik het kon halen https://mtdvlpr.github.io/CSSttR-assignment/ en https://codepen.io/Jacco01/pen/GgjNOqr?editors=1100 */
@property --x {
    syntax: "<number>";
    inherits: true;
    initial-value: 0.5;
}

@property --y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0.5;
}

@property --rainbowSpinner {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

/* voorbeeld gehaald van https://codepen.io/crossdjinn/pen/PdeJbM */
@keyframes tvAan {
    0%   { transform: scaleY(0); }
    50%  { transform: scaleY(0.02); }
    100% { transform: scaleY(1); }
}

@keyframes tvUit {
    0%   { transform: scaleY(1); }
    50%  { transform: scaleY(0.02); }
    100% { transform: scaleY(0); }
}

@keyframes scrollTitel {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

@keyframes borderKleur {
  0%   { border-color: red; }
  50%  { border-color: blue; }
  100% { border-color: red; }
}

/* bron; https://css-tricks.com/color-mixing-with-animation-composition/ */
@keyframes rainbow {
    to {--rainbowSpinner: 360; }
}


body {
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    --theme: normaal;
    container-type: style;

    /* gradient gemaakt met bron; https://cssgradient.io/ */
    background: #c32298;
    background: linear-gradient(0deg, rgba(195, 34, 152, 1) 0%, rgba(253, 187, 45, 1) 100%);
    background-size: cover;
    background-attachment: fixed;


    /* ── Beweging via radio buttons ── */

    transition: --x 10000s linear, --y 10000s linear;

    &:has(input[value="omhoog"]:checked) {
        --y: 0;
    }

    &:has(input[value="omlaag"]:checked) {
        --y: 1;
    }

    &:has(input[value="rechts"]:checked) {
        --x: 1;
    }

    &:has(input[value="links"]:checked) {
        --x: 0;
    }

    &:has(input[value="omhoog"]:checked),
    &:has(input[value="omlaag"]:checked) {
        transition: --x 10000s linear, --y 1.5s linear;
    }

    &:has(input[value="rechts"]:checked),
    &:has(input[value="links"]:checked) {
        transition: --x 1.5s linear, --y 10000s linear;
    }

    /* tv aan en uit  */
    &:has(input[value="on"]:checked) section {
        animation: tvAan 1s ease forwards;

        h2 {
            opacity: 1;
        }
    }

    &:has(input[value="off"]:checked) section {
        animation: tvUit 1s ease forwards;

        h2 {
            opacity: 0;
        }
    }

    /* rechterkant knoppen acties */

    &:has(input[value="cirkelBoven"]:checked) section {
        h2 {
            background: blue;
        }
    }

    &:has(input[value="cirkelRechts"]:checked) section {
        h2 {
            /* background: blue; */
            border-radius: 2px;
        }
    }

    &:has(input[value="cirkelBeneden"]:checked) section {
        h2 {
            animation: rainbow 500ms infinite;

            /* bron voor conic gradient; https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/conic-gradient */
            /* met ai de kleuren laten genereren met prompt: "maak een conic gradient zodat me balletje een regenboog effect krijgt"  */
            background: conic-gradient(
                from 0deg,
                hsl(var(--rainbowSpinner),              90%, 55%),
                hsl(calc(var(--rainbowSpinner) + 60),  90%, 55%),
                hsl(calc(var(--rainbowSpinner) + 120), 90%, 55%),
                hsl(calc(var(--rainbowSpinner) + 180), 90%, 55%),
                hsl(calc(var(--rainbowSpinner) + 240), 90%, 55%),
                hsl(calc(var(--rainbowSpinner) + 300), 90%, 55%),
                hsl(var(--rainbowSpinner),              90%, 55%)
            );
        }
    }

    &:has(input[value="cirkelLinks"]:checked) section {
        h2 {
            background: red;
        }
    }

    /* thema knoppen */

    &:has(input[value="thema2"]:checked) {
        --theme: crazy;
        /* bron image ;https://media4.giphy.com/media/v1.Y2lkPTZjMDliOTUyajN6aHdqNWZjeWJyN2RvaHA0MmV2ejlxODZlaTEyaHc1bWVibHp4ZiZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/2ZYKKfCr0rkvvTkdum/giphy.gif */
        background-image: url(https://media4.giphy.com/media/v1.Y2lkPTZjMDliOTUyajN6aHdqNWZjeWJyN2RvaHA0MmV2ejlxODZlaTEyaHc1bWVibHp4ZiZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/2ZYKKfCr0rkvvTkdum/giphy.gif);
        background-attachment: fixed;

    }

}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vmin 0;
    position: relative;

    /* antenne */
    > div {
    width: 0.4em;
    height: 4em;
    background: #333;
    /* position: absolute;
    top: 0; */
    transform: rotate(-25deg);
    left: 50%;
}

/* televisiekast en scherm */
    > article {
        width: clamp(15em, 50vw, 60vw);
        max-width: 600px;
        aspect-ratio: 16/9;
        background: #414141;
        border: 0.5vw solid #333;
        border-radius: 2vw;
        position: relative;

        > section {
            width: 100%;
            height: 100%;
            background: #000;
            border-radius: 1vw; 
            /* bron met ai; prompt "hoe kan ik de tv uit laten zijn wanneer de website load" */
            transform: scaleY(0);

            /* bron met ai; prompt: 'wat kan ik gebruiken om de tekst binnen de box the houden' */
            overflow: hidden;

            > h2 {
                position: absolute;
                background-color: red;
                width: 1em;
                height: 1em;
                color: transparent;
                border-radius: 50%;
                margin: 0;

                left: calc(var(--x) * (100% - 1em));
                top:  calc(var(--y) * (100% - 1em));
    
            }

            > h3 {
                margin: 0;
                padding: 1vmin;
                font-family: "Bitcount Grid Double Ink", system-ui;
                font-size: 4vw;
                font-weight: 410;
                white-space: nowrap; /* voorkomt dat tekst afbreekt wanneer ik kleiner scherm zet*/
                animation: scrollTitel 8s linear infinite;
            }
        }
}

}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */
    padding: 1vmin;
    

    form {
        display: flex;
        /* border: 1px solid black; */
        border-top: 5px solid red;
        animation: borderKleur 3s infinite;
        border-radius: 70px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(160deg, #000000, #16161f);
        

        fieldset {
            border: none;
            position: relative;
        }

        /* directional pad */
        > fieldset:nth-of-type(1) {
            display: grid;
            grid-template-columns: 5vmin 5vmin 5vmin;
            grid-template-rows: 5vmin 5vmin 5vmin;
            gap: 5px;

            label {
                position: absolute;
                width: 6vmin;
                height: 4vmin;
                background: #888;
                border-radius: 50% 10% 10% 50%;
                cursor: pointer;
                font-size: 0;
                background: linear-gradient(145deg, #2a2a3e, #1a1a28);
                box-shadow: 3px 3px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);

                &:nth-of-type(1) {
                    transform: rotate(90deg);
                    grid-column: 2;
                    grid-row: 1;
                }

                &:nth-of-type(2) {
                    transform: rotate(180deg);
                    grid-column: 3;
                    grid-row: 2;
                }

                &:nth-of-type(3) {
                    transform: rotate(-90deg);
                    grid-column: 2;
                    grid-row: 3;
                }

                &:nth-of-type(4) {
                    grid-column: 1;
                    grid-row: 2;
                }

                &:hover, &:has(input:checked) {
                    background: linear-gradient(145deg, #2a3a55, #1a2540);
                    /* color: #5599ff; */
                    box-shadow: 0 0 12px rgba(85,153,255,0.35);
                }
            }

            
            input {
                opacity: 0;
                cursor: pointer;
            }
        }

/* centre controls */
        > fieldset:nth-of-type(2) {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            align-items: center;
            row-gap: 2vmin;

            input {
                display: none;
                position: absolute;
            }

            label {
                padding: 1vmin 1vmin;
                border-radius: 6px;
                cursor: pointer;
                font-size: clamp(10px, 2.5vw, 12px);

                box-shadow: 0px 4px 0px 0px #8a2a21;
                background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
                border-radius:18px;
                cursor:pointer;
                color:#ffffff;

                &:has(input:checked) {
                    transform: scale(0.9);
                    /* box-shadow: 0 0 16px currentColor, inset 0 2px 6px rgba(0,0,0,0.5); */
                    filter: brightness(0.8);
                    box-shadow: none;
                }

                &:hover {
                    background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	                background-color:#f24437;

                }

            }

            fieldset:nth-of-type(1) {
                padding: 0;
                grid-column: 1/2;
                grid-row: 1/2;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            fieldset:nth-of-type(2) {
                padding: 0;
                grid-column: 2/3;
                grid-row: 2/3;

                label {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 1vmin;
                }
            }

            fieldset:nth-of-type(3) {
                padding: 0;
                grid-column: 3/4;
                grid-row: 1/2;
                display: flex;
                justify-content: center;
                align-items: center;

                label {
                    padding-left: 2.5vmin;
                    padding-right: 2.5vmin;
                }
            }
        }

        /* action buttons */
        > fieldset:nth-of-type(3) {
            display: grid;
            grid-template-columns: 5vmin 5vmin 5vmin;
            grid-template-rows: 5vmin 5vmin 5vmin;
            gap: 2px;
            width: fit-content;
            height: fit-content;

            label {
                width: 5vmin;
                height: 5vmin;
                font-size: 0;
                border-radius: 50%;
                cursor: pointer;

                /* knoppen gestyled mbv https://www.bestcssbuttongenerator.com/#/18 */
                box-shadow: 0px 4px 0px 0px #737373;
                background:linear-gradient(to bottom, #e9e2e2 5%, #7c7c7c 100%);
                border:1px solid #606060;
                cursor:pointer;

                &:nth-of-type(1) {
                    grid-column: 2;
                    grid-row: 1;

                    &:has(input:checked) {
                    /* box shadow hiermee goed laten werken https://html-css-js.com/css/generator/box-shadow/ */
                    -webkit-box-shadow: 0px 0px 17px 5px #BE35FF; 
                    box-shadow: 0px 0px 17px 5px #BE35FF;
                    }
                }

                &:nth-of-type(2) {
                    grid-column: 3;
                    grid-row: 2;

                    &:has(input:checked) {
                    -webkit-box-shadow: 0px 0px 17px 5px #30FF5C; 
                    box-shadow: 0px 0px 17px 5px #30FF5C;
                    }
                }

                &:nth-of-type(3) {
                    grid-column: 2;
                    grid-row: 3;

                    &:has(input:checked) {
                    -webkit-box-shadow: 0px 0px 17px 5px #FF0000; 
                    box-shadow: 0px 0px 17px 5px #FF0000;
                    }
                }

                &:nth-of-type(4) {
                    grid-column: 1;
                    grid-row: 2;

                    &:has(input:checked) {
                    -webkit-box-shadow: 0px 0px 17px 5px #1C00FF; 
                    box-shadow: 0px 0px 17px 5px #1C00FF;
                    }
                }

                &:has(input:checked) {
                    transform: scale(0.9);
                    /* box-shadow: 0 0 16px currentColor, inset 0 2px 6px rgba(0,0,0,0.5); */
                    filter: brightness(0.75);
                }

                &:hover {
                    background:linear-gradient(to bottom, #7c7c7c 5%, #e9e2e2 100%);
                }
                

            }

            input {
                opacity: 0;
                cursor: pointer;
            }
        }
    }
}

@container style(--theme: crazy) {

    header {
        > article {
            background: hsl(51, 100%, 50%);
            border: 0.5vw solid hsl(51, 100%, 50%);
        }
    }

    main {

        form {

            > fieldset:nth-of-type(3) {
                label {
                    box-shadow: 0px 4px 0px 0px hsl(51, 100%, 36%);
                    background:linear-gradient(to bottom, hsl(51, 100%, 50%) 5%, #fff9b5 100%);
                    border:1px solid hsl(51, 94%, 81%);

                    &:hover {
                    background:linear-gradient(to bottom, #fff9b5 5%, hsl(51, 100%, 50%) 100%);
                    }
                }
            }

            > fieldset:nth-of-type(1) {
                label {

                    &:nth-of-type(1) {
                    background:linear-gradient(to bottom, hsl(51, 100%, 50%) 5%, #fff9b5 100%);
                    border:1px solid hsl(51, 94%, 81%);
                    box-shadow: 4px 0px 0px 0px hsl(51, 100%, 36%);
                    }

                    &:nth-of-type(2) {
                    background:linear-gradient(to bottom, hsl(51, 100%, 50%) 5%, #fff9b5 100%);
                    border:1px solid hsl(51, 94%, 81%);
                    box-shadow: 0px -4px 0px 0px hsl(51, 100%, 36%);
                    }

                    &:nth-of-type(3) {
                    background:linear-gradient(to bottom, hsl(51, 100%, 50%) 5%, #fff9b5 100%);
                    border:1px solid hsl(51, 94%, 81%);
                    box-shadow: -4px 0px 0px 0px hsl(51, 100%, 36%);
                    }

                    &:nth-of-type(4) {
                    background:linear-gradient(to bottom, hsl(51, 100%, 50%) 5%, #fff9b5 100%);
                    border:1px solid hsl(51, 94%, 81%);
                    box-shadow: 0px 4px 0px 0px hsl(51, 100%, 36%);
                    }

                    &:hover {
                    background:linear-gradient(to bottom, #fff9b5 5%, hsl(51, 100%, 50%) 100%);
                    }
                }
            }

            > fieldset:nth-of-type(2) {
                label {
                    color: black;
                    box-shadow: 0px 4px 0px 0px hsl(51, 100%, 36%);
                    background:linear-gradient(to bottom, hsl(51, 100%, 50%) 5%, #fff9b5 100%);
                    border:1px solid hsl(51, 94%, 81%);

                    &:hover {
                        background:linear-gradient(to bottom, #fff9b5 5%, hsl(51, 100%, 50%) 100%);
                    }
                }
            }

        }
    
    }

}