.settings{
    align-items: center;
    display: grid;
    gap: 5%;
    grid-template-areas:
    "a"
    "b"
    "d"
    "f"
    "e";
}

.volume{
    grid-area: a;
    width: 100%;
    justify-self: center;
    margin-top: 100px;
    font-size:2vw;
    display: grid;
    grid-template-columns: repeat(2, 250);
    grid-template-rows: repeat(2, 250);
    grid-template-areas:
    "a"
    "b";
    background-image: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    background-size:500%;
    animation: animate 5s linear infinite;
}

.volumeText{
    grid-area: b;
}

.slider-container{
    width: 100%;
}

.slider{
    width: 100%;
    appearance:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 1vh;
    background-image: var(--gradient);
}

.slider::-webkit-slider-thumb{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width:25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid var(--secondary-color);
    background-color: var(--primary-color);
    cursor:pointer;
}



.slider::-moz-range-thumb{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width:25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid var(--secondary-color);
    background-color: var(--primary-color);
    cursor:pointer;
}

.slider::-moz-range-thumb:hover{
    background-color: var(--secondary-color);
    border: 2px solid var(--primary-color);
}

.range .sliderValue{
    position:relative;
    width: 100%;
}

.range .sliderValue span{
    position: absolute;
    height: 3vw;
    width: 3vw;
    font-size: 1.5vw;
    color: var(--primary-color);
    font-weight: 500;
    top: -4vw;
    transform:translateX(-15%) scale(0);
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
    line-height: 3vw;
    z-index: 2;

}

.range .sliderValue span.show{
    transform:translateX(-15%) scale(1);
    display: inline-flex;
    justify-content: center;
    align-self: center;
    text-align: center;
}

.range .sliderValue span:after{
    position: absolute;
    content: "";
    height: 3vw;
    width: 3vw;
    left: 0;
    background: var(--secondary-color);
    transform:translateX(-10%) rotate(45deg);
    border: 3px solid var(--invertedbackground);
    z-index: -1;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;

}

.buttons{
    grid-area: e;
    color: transparent;
    display: grid;
    grid-template-areas:
    "a b"
}

#reset{
    grid-area: a;
    width: 49%;
    padding:14px 0px;
    justify-self: center;
}

#save{
    grid-area: b;
    width: 49%;
    padding:14px 0px;
    justify-self: center;
}

.color-indicator {
    display: inline-block;
    width: 8vw;
    height: 8vw;
    vertical-align: middle;
    margin-top: 1vw;
    margin-bottom: 1vw;
    margin-left: 1vw;
}


.primaryColorPicker {
    background-image: var(--gradient);
    background-size: 500%;
    -webkit-background-size: 500%;
    background-position: left;
    -webkit-background-clip: text;
    background-clip: text;
    animation: animate 5s linear infinite;
}

.secondaryColorPicker{
    background-image: var(--gradient);
    background-size: 500%;
    -webkit-background-size: 500%;
    background-position: left;
    -webkit-background-clip: text;
    background-clip: text;
    animation: animate 5s linear infinite;
}


.primaryColorPicker .color-indicator {
    background-color: var(--primary-color);
}


.secondaryColorPicker .color-indicator {
    background-color: var(--secondary-color);
}

.backgroundColorPicker .color-indicator {
    background-color: var(--background-color);
}

.colorPicker{
    padding: 1vh;
    border: 2px solid var(--invertedbackground);
    border-radius: .3rem;
    font-size: 4vw;
    text-align: left;
}

.texturepack{
    grid-area: d;
    color:transparent;
    background-color:transparent;
}

label{
    cursor: pointer;
    width: 100%;
    background-image: var(--gradient);
    background-size: 500%;
    background-position: right;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-position 0.2s;
    font-size: 2vw;
    grid-area: f;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
  }

  label:hover{
      background-position: left;
      cursor: pointer;
  }

  input[type="file"]{
    display:none;
}

.particles{
    grid-area: f;
}

.backgroundColorPicker{
    background-image: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    background-size:500%;
    animation: animate 5s linear infinite;
}
