@font-face {
    font-family: "PixelGame";
    src: url(./assets/fonts/Pixel\ Game.otf);
}

/* font bron: https://www.1001fonts.com/pixel-game-font.html */
:root {
    --body-bg-1: #ec6590;
    --body-bg-2: #8cbdd8;
    --rain-bg-1: #6d88aa;
    --rain-bg-2: #0f223f;

    --screen1: #7ecbff;
    --screen2: #dff6ff;
    --rain-screen: #6d88aa;

    --grass-1: #8ee27e;
    --grass-2: #4caf50;
    --rain-grass: #4ea14a;

    --pill: rgba(255, 255, 255, .55);
    --shadow: rgba(30, 40, 60, .16);

    --left: #9bd3ff;
    --btnB: #ffd2e6;
    --theme: #ffe9a6;
    --p: 12px;
}







* {
    box-sizing: border-box;
}

/* body */
body {
    margin: 1em;
    min-height: 100vh;
    place-items: center;
    color: var(--ink);


  
    background: radial-gradient(circle at 20% 20%, #f5dbe4 0%, transparent 45%),
        radial-gradient(circle at 80% 30%, #d2e6f3 0%, transparent 50%),
        linear-gradient(135deg, var(--body-bg-1), var(--body-bg-2));


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

    &:has(#theme:checked) {
        --body-bg-1: #6d88aa;
        --body-bg-2: #0f223f;
        --screen1: #549cf48a;
        --screen2: #3f5f85;
        --rain-grass: #4ea14a;
    }

    &:has(#theme:checked) main section>div::after {
        opacity: 1;
        animation: rain 0.90s linear infinite;
    }

}










/* header */
header {
    margin-bottom: 1.5rem;
    
    

    h1 {
       
        font-family: "PixelGame";
        text-align: center;
        margin: 0;
        line-height: 1.1;
        font-size: clamp(5em, 5vh, 5.2em);
        
        color: #4caf50;
        font-weight: 600;
        animation: font 2s infinite;
        /* bron clamp:width: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp; */
        
    }

}










/* main */
main {
    width: 100%;
    display: flex;
    justify-content: center;
    container-type: inline-size;

    section {
        width: min(94vw, 29rem);
        display: flex;
        flex-direction: column;
        gap: 1em;
        padding: 1em;

        >input {
            position: absolute;
            width: 1px;
            height: 1px;
          
            clip-path: inset(50%);
         
        }


        /* style voor screen: */
        >div {
           
            min-height: 18rem;
            background-color: rgb(155, 185, 185);
            border-radius: 1.3em;
            position: relative;
            overflow: hidden;
            background: linear-gradient(var(--screen1), var(--screen2));
            box-shadow:
                0 26px 60px rgba(30, 40, 60, .20),
                0 10px 18px rgba(30, 40, 60, .12),
                inset 0 0 0 3px rgba(255, 255, 255, .65);

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 25%;
                opacity: 0;
                background: repeating-linear-gradient(106deg, transparent 0 18px,
                        rgb(255, 255, 255, .3) 18px 20px,
                        transparent 20px 35px);
                /*bron repeating-linear-gradient:width: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-linear-gradient;  */


            }
            &::before {
                content: "";
                position: absolute;
                inset: 10px;
                border-radius: 1.4rem;
                filter: blur(.2px);
                background: radial-gradient(circle at 30% 15%, rgba(255, 255, 255, .45), transparent 45%);
                ;

            }

            /* hier staart de styling binnen de screen */
            /* style voor clouds: */
            >div:first-of-type {
                position: absolute;
                inset: 0;

                span {
                    position: absolute;
                    display: block;
                    width: 5rem;
                    height: 2rem;
                    background: #fff;
                    border-radius: 1em;
                    box-shadow: 0 6px 12px rgb(0, 0, 0, .08);

                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        background: #fff;
                        border-radius: 1em;
                    }

                    &::before {
                        width: 1.8rem;
                        height: 1.8rem;
                        left: .5rem;
                        top: -.7rem;

                    }

                    &::after {
                        width: 2.3rem;
                        height: 2.3rem;
                        left: .6rem;
                        top: -.9rem;


                    }

                    &:first-child {
                        top: 18%;
                        left: 5%;
                    }

                    &:nth-of-type(2) {
                        top: 30%;
                        right: 2%;
                        transform: scale(.85);
                    }
                }

            }


            /* puff caracter */
            > div:nth-of-type(2) {
                border-radius: 20px;
                background: transparent;
                position: absolute;
                left: 50%;
                top: 55%;
                transform: translate(-50%, -50%);
                width: 144px;
                height: 144px;
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                grid-template-rows: repeat(12, 1fr);
                transform-origin: center bottom;
                
                z-index: 2;
                --puff-color: #ff78b6;
                --puff-check-color: #e4e43b;
                --puff-check-theme: #272d5d;

                span {
                    background: transparent;
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                span:nth-child(n+6):nth-child(-n+7),
                span:nth-child(n+16):nth-child(-n+21),
                span:nth-child(n+27):nth-child(-n+34),
                span:nth-child(n+38):nth-child(-n+47),
                span:nth-child(n+49):nth-child(-n+60),
                span:nth-child(n+61):nth-child(-n+72),
                span:nth-child(n+73):nth-child(-n+84),
                span:nth-child(n+85):nth-child(-n+96),
                span:nth-child(n+97):nth-child(-n+108),
                span:nth-child(n+110):nth-child(-n+119),
                span:nth-child(n+123):nth-child(-n+130),
                span:nth-child(n+138):nth-child(-n+139) {
                    background: var(--puff-color);
                }

                &::after {
                    content: "";
                    position: absolute;

                    width: var(--p);
                    height: var(--p);
                    left: 0;
                    top: 0;
                    background: transparent;
                    box-shadow:
                        calc(3 * var(--p)) calc(4 * var(--p)) #111,
                        calc(4 * var(--p)) calc(4 * var(--p)) #111,
                        calc(7 * var(--p)) calc(4 * var(--p)) #111,
                        calc(8 * var(--p)) calc(4 * var(--p)) #111,

                        /* mond */
                        calc(6 * var(--p)) calc(7 * var(--p)) #111,
                        calc(5 * var(--p)) calc(7 * var(--p)) #111,


                        /* wangen */
                        calc(2 * var(--p)) calc(6 * var(--p)) #ff5b9c,
                        calc(9 * var(--p)) calc(6 * var(--p)) #ff5b9c;
                    transition: transform .15s ease;

                }

            }

            /* grass */
            >div:last-of-type {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 4em;
                background: linear-gradient(var(--grass-1), var(--grass-2));
            }
        }

        form {
            display: grid;
            margin-top: 1em;
            gap: 2em;
        }

        fieldset {
            padding: 0.8rem;
            margin: 0;
            border: 0;
            border-radius: 999px;
            display: flex;
            flex-wrap: nowrap;
            gap: 0.8rem;
            align-items: center;
            justify-content: center;
            background: rgb(255, 255, 255, 0.55);
            box-shadow: 0 12px 30px rgba(30, 40, 60, 0.14);

            &:first-of-type {
                label:nth-of-type(1) {
                    background: radial-gradient(circle at 30% 30%, #ffffff, var(--left));
                }

                label:nth-of-type(2) {
                    background: radial-gradient(circle at 30% 30%, #ffffff, #f2f2f2);
                }

                label:nth-of-type(3) {
                    background: radial-gradient(circle at 30% 30%, #ffffff, #ffb3c7);
                }

            }

            &:last-of-type {
                label:nth-of-type(1) {
                    background: radial-gradient(circle at 30% 30%, #ffffff, #bfe6ff);
                }

                label:nth-of-type(2) {
                    background: radial-gradient(circle at 30% 30%, #ffffff, var(--theme));
                }

                label:nth-of-type(3) {
                    background: radial-gradient(circle at 30% 30%, #ffffff, #d8c8ff);
                }

            }
        }

        label {
            width: 4rem;
            height: 4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5em;
            padding: 1em 1em;
            border-radius: 50%;
            font-size: 1.5rem;
            place-items: center;
            box-shadow: 0 10px 18px rgb(0, 0, 0, 0.12), inset 0 0 0 2px rgba(219, 157, 232, 0.4);

        }

        legend {
            width: 100%;
            text-align: left;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 0.5rem;
        }

        /*  active inputs */
        #left:checked~form label[for="left"],
        #center:checked~form label[for="center"],
        #right:checked~form label[for="right"],
        #jump:checked~form label[for="jump"],
        #power:checked~form label[for="power"],
        #theme:checked~form label[for="theme"] {
            outline: none;
            transform: translateY(5px);
            box-shadow:
                inset 4px 4px 12px #4ea14a54,
                inset -4px -4px 10px rgba(162 145 145),
                0 4px 8px rgba(21 77 190 / 8%);
        }

        /* beweging: left */
        #left:checked~div>div:nth-of-type(2) {
            animation-name: walk-left;
            animation-duration: .45s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;

            &::after {
                transform: translate(-15px);
            }
        }

        /* beweging: center */
        #center:checked ~ div > div:nth-of-type(2) {
            transform: translate(-50%, -50%) translateX(0);
        }

        /* beweging: right */
        #right:checked~div>div:nth-of-type(2) {
            animation-name: walk-right;
            animation-duration: .45s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;

            &::after {
                transform: translate(15px);
            }

        }

        /* beweging: jump */
        #jump:checked ~ div >div:nth-of-type(2) {
         
            animation-name: jump-puff;
            animation-duration: .8s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: none;


        }
        #power:checked ~ div > div:nth-of-type(2) {
            --puff-color:#e4e43bfb;
        }
        #theme:checked ~ div > div:nth-of-type(2) {
            --puff-color: #5a67c6;
        }

    }
}













/* animation */

@keyframes jump-puff {
    0% {

        transform: translate(-50%, -50%) scale(1, 1) translateY(0);
    }

    20% {
        transform: translate(-50%, -50%) scale(1.08, 0.92) translateY(10px);

    }

    55% {
        transform: translate(-50%, -50%) scale(1.05, 1.03) translateY(-30px);

    }

    100% {
        transform: translate(-50%, -50%) scale(1, 1) translateY(0);

    }

    /* bron scale: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/scale */
}

@keyframes walk-left {
    0% {
        transform: translate(-50%, -50%) translateY(0) translateX(-70px);


    }

    50% {
        transform: translate(-50%, -50%) translateY(-6px) translateX(-85px);

    }

    100% {
        transform: translate(-50%, -50%) translateY(0) translateX(-70px);

    }
}

@keyframes walk-right {
    0% {
        transform: translate(-50%, -50%) translateY(0) translateX(70px);


    }

    50% {
        transform: translate(-50%, -50%) translateY(-6px) translateX(85px);

    }

    100% {
        transform: translate(-50%, -50%) translateY(0) translateX(70px);

    }
}

/* rain */
@keyframes rain {
    from {
        transform: translateY(-3px);
    }

    to {
        transform: translateY(3px);


    }
}

/* h1 */
@keyframes font{
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}





/* containar query */
@container (min-width: 36rem) {
    

    main {
        section {
            width: min(92vw, 55em);
            display: grid;
            grid-template-columns: 1fr auto;

            align-items: center;
            justify-content: center;
            gap: 4em;

            >div {
                grid-column: 1;
                min-height: 22rem;
                min-width: 20rem;
            }

            form {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                grid-column: 2;
                margin-top: 0;
                align-self: center;

                fieldset {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: center;

                    label {
                        font-size: 1.5em;
                    }

                }
            }
        }
    }



}