:root {
    --hue: linear-gradient(90deg,
            rgba(255, 0, 0, 1) 0%,
            rgba(255, 154, 0, 1) 10%,
            rgba(208, 222, 33, 1) 20%,
            rgba(79, 220, 74, 1) 30%,
            rgba(63, 218, 216, 1) 40%,
            rgba(47, 201, 226, 1) 50%,
            rgba(28, 127, 238, 1) 60%,
            rgba(95, 21, 242, 1) 70%,
            rgba(186, 12, 248, 1) 80%,
            rgba(251, 7, 217, 1) 90%,
            rgba(255, 0, 0, 1) 100%);
    --sat: linear-gradient(90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 0, 0, 1) 100%);
    --val: linear-gradient(90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(255, 0, 0, 1) 100%);
}

html,
body {
    background-color: black;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    font-family: 'Lucida Console', monospace;
}

/* ----------- SCROLLBAR ----------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #00000000;
}

::-webkit-scrollbar:hover {
    width: 8px;
    height: 8px;
    background: #00000000;
}

::-webkit-scrollbar-track {
    border-radius: 8px;
    height: 8px;
    background-color: #00000000;
    border: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    height: 8px;
    border: 1px solid transparent;
    background-clip: content-box;
    background-color: white;
    transition: all 1s;
}

#settingsContent::-webkit-scrollbar-thumb {
    border-radius: 8px;
    height: 8px;
    border: 1px solid transparent;
    background-clip: content-box;
    background-color: gray;
    transition: all 1s;
}

::-webkit-scrollbar-thumb:hover {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: gray;
}

#settingsContent::-webkit-scrollbar-thumb:hover {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #666666;
}

::-webkit-scrollbar-thumb:active {
    background-color: black;
}

/* ----------- RANGE ----------- */
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      background-color: gray;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 15px;
      color: darkgreen;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 15px;
      height: 15px;
      cursor: ew-resize;
      background: gray;
      box-shadow: -100% 0 0 100% darkgreen;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: darkgreen; 
}
input[type="range"]::-moz-range-track {  
  background-color: gray;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: darkgreen; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: gray;
}