body {
    font-family: Arial, sans-serif;
    background: #222;
    color: #eee;
    text-align: center;
    padding: 20px;
}

/* /////////////////  aanpassing 17 jan 26 */
.appHeader {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 20px;
}

.logoKlein {
    transform: scale(0.25);
    transform-origin: left top;
}

.logoKlein .terra,
.logoKlein .wolvega {
    font-weight: 700;
    letter-spacing: 2px;
}

/* ////  WATERCOLOR effect in de titel ////  */
.titelWater {

    margin-bottom: 20px;
    text-align: center;


    justify-self: center;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    text-align: center;

    background: linear-gradient(120deg,
            #fff47f,
            #5fd3ff,
            #f11a1a,
            #7fffa8);
    background-size: 300% 300%;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: waterFlow 6s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(120, 255, 255, 0.35);
}

@keyframes waterFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* keuropslag rechts::after */

.rechtsBlok {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    height: calc(100dvh - 40px);
    /* past zich aan mobiel aan */

}

#saveBtn {
    margin-bottom: 10px;
    align-self: stretch;
    flex: 0 0 auto;
    margin-bottom: 12px;

}


/* // opgeslage kleuren lopen niet uit beeld: */
.palette {
    /* display: flex;
    flex-direction: row;
    gap: 10px; */
    /* 
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden; */

    padding-bottom: 6px;

    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    align-content: flex-start;
    gap: 10px;

    max-height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.palette .color-swatch {
    width: clamp(28px, 3vw, 36px);
    height: clamp(28px, 3vw, 36px);
    border-radius: 50%;
    flex: 0 0 auto;
}


/* optioneel: subtiele scrollbar */
.palette::-webkit-scrollbar {
    height: 6px;
}

.palette::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}


/* //////// tot aan hier de aan[assing ] */
h1 {
    color: #0ff;
    text-shadow: 0 0 10px #0ff;
}

.glow-ball {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 20px auto;
    background: rgb(255, 0, 0);
    box-shadow: 0 0 40px rgb(255, 0, 0);
    transition: 0.2s;
}

.sliders {
    margin: 20px 0;
}

.sliders label {
    display: block;
    margin: 10px;
}

input[type=range] {
    width: 250px;
    height: 10px;
    border-radius: 5px;
    outline: none;
    border: none
}

/* input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #fff;
        } */

input[type=range] {
    appearance: none;
    -webkit-appearance: none;
    width: 250px;
    height: 0px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;

}

/* Chrome / Edge */
input[type=range]::-webkit-slider-runnable-track {
    height: 12px;
    /* << dikte hier aanpassen */
    border-radius: 6px;
}

#redish::-webkit-slider-runnable-track {
    background: linear-gradient(to right, black, red);
}

#greenish::-webkit-slider-runnable-track {
    background: linear-gradient(to right, black, green);
}

#blueish::-webkit-slider-runnable-track {
    background: linear-gradient(to right, black, blue);
}

/* Firefox */
input[type=range]::-moz-range-track {
    height: 12px;
    /* << dezelfde dikte */
    border-radius: 6px;
}

#redish::-moz-range-track {
    background: linear-gradient(to right, black, red);
}

#greenish::-moz-range-track {
    background: linear-gradient(to right, black, green);
}

#blueish::-moz-range-track {
    background: linear-gradient(to right, black, blue);
}


#saveBtn {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
}

#saveBtn {
    background: #0ff;
    box-shadow: 0 0 10px #0ff;
    width: 15vw;
}

#saveBtn:hover {
    background: #fff;
    color: #000;
}

.palette {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.color-swatch {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: 2px solid #555;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.rgb-value {
    margin-top: 15px;
    font-size: 18px;
    color: #0ff;
}


/* kleurencirkel elementen */
.color-wheel {
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.current-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #fff;
    background: #fff;
}

/* Einde kleurencirkel elementen */
.speelBlok {
    /* display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; */
    /* gap: 20px; */
    /* max-width: 100vw; */
    /* margin: 0 auto; */


    /* .speelBlok { */
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    justify-content: flex-start;
    align-items: start;
    /* } */

}

.color-wheel,
.glow-ball {
    width: 240px;
    /* was groter */
    height: 240px;
}

.midOnderBlok {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.rechtsBlok {
    max-width: 18vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width:480px) {}


/* responive gemaakt op 17 dec 2026 */

/* ===============================
   BASIS / DESKTOP LAYOUT
   =============================== */

body {
    margin: 0;
    padding: 20px;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
}

.speelBlok {
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 260px;
    /* main + sidebar */
    gap: 40px;
    align-items: start;
}

/* hoofdcontent blijft netjes gecentreerd */
.midBlok {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* cirkel + bol naast elkaar */
.midOnderBlok {
    display: flex;
    gap: 32px;
    justify-content: center;
}

/* ===============================
   RECHTER SIDEBAR
   =============================== */

.rechtsBlok {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

/* opslaan-knop boven */
#saveBtn {
    width: 100%;
}

/* opgeslagen kleuren onder elkaar */
.palette {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===============================
   SLIDERS
   =============================== */

.sliders {
    width: 100%;
    max-width: 520px;
}

input[type=range] {
    width: 100%;
}

/* ===============================
   VISUELE ELEMENTEN
   =============================== */


/* ===============================
   MOBIEL  staat nu in mobile.css
   =============================== */