@media (max-width: 640px) {

    html,
    body {
        height: 100%;
        margin: 0;
        overflow: hidden;
        /* absoluut geen scroll */
    }

    body {
        display: flex;
        justify-content: center;
        align-items: stretch;
    }

    .speelBlok {
        height: 100dvh;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .rgb-value {
        font-size: 0.95rem;
        margin: 4px 0;
    }

    .midBlok {
        height: 100%;
        display: grid;
        grid-template-rows:
            auto
            /* titel */
            auto
            /* sliders */
            auto
            /* rgb */
            1fr;
        /* kleurencirkel */
        gap: 8px;
        align-items: center;
    }

    .titelWater {
        font-size: 1.6rem;
        margin: 0;
        text-align: center;
    }

    .sliders {
        width: 100%;
    }

    .rgbValue {
        margin: 0;
        font-size: 1.1rem;
    }

    .midOnderBlok {
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-top: 4px;
        /* klein en gecontroleerd */
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .color-wheel,
    .glow-ball {
        aspect-ratio: 1 / 1;
        width: 50vw;
        height: 50vw;
    }

    .glow-ball {
        width: 30vw;
        height: 30vw;
    }

    .color-wheel {
        touch-action: none;
    }

    .midBlok {
        justify-content: flex-start;

    }

    .midBlok {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* 🔑 i.p.v. space-between */
        gap: 12px;
        /* gecontroleerde afstand */
    }

}