body h1{
  font-family: "Caveat", "cursive";
}


.menu-open {
  transform: translateX(0);
}

.menu-closed {
  transform: translateX(100%);
}

.volume-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #7f1d1d; 
  border-radius: 999px;
  cursor: pointer;
}

.volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #D3AF37;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -4px;
}

.volume-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #D3AF37;
  border-radius: 50%;
  cursor: pointer;
}