#volume-range {
  width: 50%;
  margin-top: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

#volume-range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--accent-color-gold); 
  border-radius: 3px;
}

#volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px; /* centers thumb on track */
  width: 18px;
  height: 18px;
  background: var(--accent-color-brown); 
  border-radius: 50%;
  cursor: pointer;
}

#volume-range::-moz-range-track {
  height: 6px;
  background: var(--accent-color-brown);
  border-radius: 3px;
}

#volume-range::-moz-range-progress {
  background: var(--accent-color-brown); 
  height: 6px;
  border-radius: 3px;
}

#volume-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--accent-color-brown); 
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

#volume-range:focus-visible::-webkit-slider-thumb,
#volume-range:focus-visible::-moz-range-thumb {
  outline: 3px solid #000;
  outline-offset: 2px;
}