#generator {
  width: 100%;
  max-width: 1920px;
  padding-bottom: var(--box-space);
}

.generator {
  background-color: #707B64;
  width: 100%;
  max-height: 1080px;
  margin-bottom: var(--space);
}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 30%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
  padding-bottom: var(--space);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 48px;
  width: 48px;
  margin-top: -12px;
  border-radius: 24px;
  background-color: #8c9a7c;
  cursor: pointer;
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

input[type=range]:hover::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: white;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 24px;
  border-radius: 24px;
  background-color: #707B64;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  width: 100%;
  height: 24px;
  border-radius: 24px;
  background-color: #8c9a7c;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  width: 100%;
  height: 24px;
  border-radius: 24px;
  background-color: #8c9a7c;
}