.sliders {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 150px;
    padding: 25px;
    border-radius: 5px;
    background-color: #363636;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

input {
    -webkit-appearance: none;
    width: 15rem;
    background: transparent;
}

/* Track Styles  */
/* chrome, safari, edge, firefox */
input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 20px;
    box-shadow: inset 1px 1px 2px #57575780;
}

input::-moz-range-track {
    height: 5px;
    border-radius: 20px;
    box-shadow: inset 1px 1px 2px #57575780;
}
/* red track */
input:first-child::-webkit-slider-runnable-track {
    background: #ff5e5e;
}
input:first-child::-moz-range-track {
    background: #ff5e5e;
}

/* green track */
input:nth-child(2)::-webkit-slider-runnable-track {
    background: #66ed85;
}
input:nth-child(2)::-moz-range-track {
    background: #66ed85;
}

/* blue track  */
input:nth-child(3)::-webkit-slider-runnable-track {
    background: #69b6ff;
}

input:nth-child(3)::-moz-range-track {
    background: #69b6ff;
}

/* Thumb Styles  */
input::-moz-range-thumb:hover {
    cursor: grab;
}
input::-webkit-slider-thumb:hover {
    cursor: grab;
}

input::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
    background-color: white;
    box-shadow: inset 0.5px 0.5px 1px #57575780;
    transform: translateY(-5px);
}

input::-moz-range-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
    background-color: white;
    box-shadow: inset 0.5px 0.5px 1px #57575780;
}

.color-preview {
    padding: 20px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
}

#dominant-color {
    font-size: 20px;
    font-weight: bold;
    font-family: monospace;
    padding: 15px 0;
}

#color-report {
    font-family: monospace;
}


@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');

body{
  font-family: 'Barlow', sans-serif;
}

a:hover{
  text-decoration: none;
}

.border-left{
  border-left: 2px solid var(--primary) !important;
}


.sidebar{
  top: 0;
  left : 0;
  z-index : 100;
  overflow-y: auto;
}

.overlay{
  background-color: rgb(0 0 0 / 45%);
  z-index: 99;
}

/* sidebar for small screens */
@media screen and (max-width: 767px){
  
  .sidebar{
    max-width: 18rem;
    transform : translateX(-100%);
    transition : transform 0.4s ease-out;
  }
  
  .sidebar.active{
    transform : translateX(0);
  }
  
}

.logo {
    display: flex;
    justify-content: center;
    padding: 20px;
    align-items: center;
}