*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.align-center {
    align-items: center;
}

.rainbow-container {
    gap: 1rem;
}

.rainbow-bar {
    width: 4rem;
    height: 40vh;
    border: 1px solid black;
}

.saturation-control-container {
    margin-block: 2rem;
}

#saturation-slider {
    --bg-color: #374151;
    --fg-color: #9ca3af;
}

/* reset slider styling */
input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
}
input[type="range"]:focus {
    outline: none;
}

/* slider bg */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--bg-color);
    height: 2rem;
}
input[type="range"]::-moz-range-track {
    background-color: var(--bg-color);
    height: 2rem;
}

/* slider thumb, on chrome/safari/edge */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;

    background-color: var(--fg-color);
    height: 2rem;
    width: 1rem;
}
input[type="range"]::-webkit-slider-thumb::before {
    background-color: red;
    height: 1rem;
    width: 1rem;
}

/* slider thumb, on firefox */
input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border: none;
    border-radius: 0;

    opacity: 0;
}
/* progress bar to the left of thumb, on firefox */
input[type="range"]::-moz-range-progress {
    background-color: var(--fg-color);
    height: 2rem;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0lBR0ksc0JBQXNCO0FBQzFCOztBQUVBO0lBQ0ksU0FBUztJQUNULGFBQWE7SUFDYixnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLG1CQUFtQjtBQUN2Qjs7QUFFQTtJQUNJLGFBQWE7SUFDYixzQkFBc0I7QUFDMUI7O0FBRUE7SUFDSSxhQUFhO0lBQ2IsbUJBQW1CO0FBQ3ZCOztBQUVBO0lBQ0ksbUJBQW1CO0FBQ3ZCOztBQUVBO0lBQ0ksU0FBUztBQUNiOztBQUVBO0lBQ0ksV0FBVztJQUNYLFlBQVk7SUFDWix1QkFBdUI7QUFDM0I7O0FBRUE7SUFDSSxrQkFBa0I7QUFDdEI7O0FBRUE7SUFDSSxtQkFBbUI7SUFDbkIsbUJBQW1CO0FBQ3ZCOztBQUVBLHlCQUF5QjtBQUN6QjtJQUNJLHdCQUF3QjtJQUN4QixxQkFBZ0I7U0FBaEIsZ0JBQWdCO0lBQ2hCLHVCQUF1QjtJQUN2QixlQUFlO0lBQ2YsWUFBWTtBQUNoQjtBQUNBO0lBQ0ksYUFBYTtBQUNqQjs7QUFFQSxjQUFjO0FBQ2Q7SUFDSSxpQ0FBaUM7SUFDakMsWUFBWTtBQUNoQjtBQUNBO0lBQ0ksaUNBQWlDO0lBQ2pDLFlBQVk7QUFDaEI7O0FBRUEsd0NBQXdDO0FBQ3hDO0lBQ0ksd0JBQXdCO0lBQ3hCLGdCQUFnQjtJQUNoQixZQUFZO0lBQ1osZ0JBQWdCOztJQUVoQixpQ0FBaUM7SUFDakMsWUFBWTtJQUNaLFdBQVc7QUFDZjtBQUNBO0lBQ0kscUJBQXFCO0lBQ3JCLFlBQVk7SUFDWixXQUFXO0FBQ2Y7O0FBRUEsNkJBQTZCO0FBQzdCO0lBQ0ksd0JBQXdCO0lBQ3hCLHFCQUFnQjtTQUFoQixnQkFBZ0I7SUFDaEIsWUFBWTtJQUNaLGdCQUFnQjs7SUFFaEIsVUFBVTtBQUNkO0FBQ0Esa0RBQWtEO0FBQ2xEO0lBQ0ksaUNBQWlDO0lBQ2pDLFlBQVk7QUFDaEIiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiKixcbio6OmJlZm9yZSxcbio6OmFmdGVyIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuXG5ib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgaGVpZ2h0OiAxMDB2aDtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgcGxhY2UtaXRlbXM6IGNlbnRlcjtcbn1cblxuLmZsZXgtY29sIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbi5mbGV4LXJvdyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4uYWxpZ24tY2VudGVyIHtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4ucmFpbmJvdy1jb250YWluZXIge1xuICAgIGdhcDogMXJlbTtcbn1cblxuLnJhaW5ib3ctYmFyIHtcbiAgICB3aWR0aDogNHJlbTtcbiAgICBoZWlnaHQ6IDQwdmg7XG4gICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG59XG5cbi5zYXR1cmF0aW9uLWNvbnRyb2wtY29udGFpbmVyIHtcbiAgICBtYXJnaW4tYmxvY2s6IDJyZW07XG59XG5cbiNzYXR1cmF0aW9uLXNsaWRlciB7XG4gICAgLS1iZy1jb2xvcjogIzM3NDE1MTtcbiAgICAtLWZnLWNvbG9yOiAjOWNhM2FmO1xufVxuXG4vKiByZXNldCBzbGlkZXIgc3R5bGluZyAqL1xuaW5wdXRbdHlwZT1cInJhbmdlXCJdIHtcbiAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgd2lkdGg6IDE1cmVtO1xufVxuaW5wdXRbdHlwZT1cInJhbmdlXCJdOmZvY3VzIHtcbiAgICBvdXRsaW5lOiBub25lO1xufVxuXG4vKiBzbGlkZXIgYmcgKi9cbmlucHV0W3R5cGU9XCJyYW5nZVwiXTo6LXdlYmtpdC1zbGlkZXItcnVubmFibGUtdHJhY2sge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJnLWNvbG9yKTtcbiAgICBoZWlnaHQ6IDJyZW07XG59XG5pbnB1dFt0eXBlPVwicmFuZ2VcIl06Oi1tb3otcmFuZ2UtdHJhY2sge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJnLWNvbG9yKTtcbiAgICBoZWlnaHQ6IDJyZW07XG59XG5cbi8qIHNsaWRlciB0aHVtYiwgb24gY2hyb21lL3NhZmFyaS9lZGdlICovXG5pbnB1dFt0eXBlPVwicmFuZ2VcIl06Oi13ZWJraXQtc2xpZGVyLXRodW1iIHtcbiAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogMDtcblxuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWZnLWNvbG9yKTtcbiAgICBoZWlnaHQ6IDJyZW07XG4gICAgd2lkdGg6IDFyZW07XG59XG5pbnB1dFt0eXBlPVwicmFuZ2VcIl06Oi13ZWJraXQtc2xpZGVyLXRodW1iOjpiZWZvcmUge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbiAgICBoZWlnaHQ6IDFyZW07XG4gICAgd2lkdGg6IDFyZW07XG59XG5cbi8qIHNsaWRlciB0aHVtYiwgb24gZmlyZWZveCAqL1xuaW5wdXRbdHlwZT1cInJhbmdlXCJdOjotbW96LXJhbmdlLXRodW1iIHtcbiAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogMDtcblxuICAgIG9wYWNpdHk6IDA7XG59XG4vKiBwcm9ncmVzcyBiYXIgdG8gdGhlIGxlZnQgb2YgdGh1bWIsIG9uIGZpcmVmb3ggKi9cbmlucHV0W3R5cGU9XCJyYW5nZVwiXTo6LW1vei1yYW5nZS1wcm9ncmVzcyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZmctY29sb3IpO1xuICAgIGhlaWdodDogMnJlbTtcbn1cbiJdfQ== */