:root {
  --accent-teal: #47b6a4;
  --graywhite: #dcdcdc;
  --gray: #6a6a6a;
  --darkgray: #3c3c3c;
}

* {
  font-family: "Vend Sans", sans-serif;
  color: var(--graywhite);
}

body {
  background-color: #272727;
}

h1 {
  font-optical-sizing: auto;
}

h4 {
  margin-top: -20px;
  font-family: "Birthstone", cursive;
  font-weight: 400;
  font-style: normal;
  color: var(--accent-teal);
}

p {
  font-optical-sizing: auto;
}

a {
  text-decoration: none;
}

select,
button {
  background-color: var(--darkgray);
  border: none;
  border-radius: 4px;
  height: 24px;
}

select:hover,
button:hover {
  background-color: var(--gray);
}

select:disabled,
button:disabled {
  color: var(--gray);
}

select:hover:disabled,
button:hover:disabled {
  color: var(--darkgray);
}

.slidecontainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.slider {
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 160px;
  border-radius: 6px;
  vertical-align: bottom;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--graywhite);
  background: var(--accent-teal);
  cursor: pointer;
  transform: translate(-4px, 0px);
}

input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 3px;
  cursor: pointer;
  width: 6px;
}

.slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--graywhite);
  background: var(--accent-teal);
  cursor: pointer;
}

input[type="range"]::-moz-range-progress {
  background-color: var(--accent-teal);
  width: 6px;
  border-radius: 3px;
}

input[type="range"]::-moz-range-track {
  background-color: var(--graywhite);
}

.debug {
  border: 1px solid red;
}

#gridcontainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 16%));
  grid-auto-flow: row;
  margin-top: 20px;
  gap: 40px 0px;
}

select {
  width: 100px;
}

.sound {
  width: 120px;
}