* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h1 {
  position: fixed;
  top: 8px;
  left: 8px;
  font-weight: 300;
  font-size: 24px;
}

input[type="range"] {
  width: calc(100vw - 48px);
  margin: calc(50vh - 32px) 24px;
  appearance: none;
  -webkit-appearance: none;
  background-color: #95a5a6;
  height: 16px;
}
input[type="range"]::-webkit-slider-thumb {
  border-radius: 48px;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  height: 48px;
  width: 48px;
  background-color: #000;
  border: none;
}
input[type="range"]::-moz-range-thumb {
  border-radius: 48px;
  appearance: none;
  box-shadow: none;
  height: 48px;
  width: 48px;
  background-color: #000;
  border: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  appearance: none;
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"].toggle {
  width: 64px;
}
input[type="range"].toggle::-webkit-slider-thumb {
  width: 48px;
}
input[type="range"].toggle::-moz-range-thumb {
  width: 48px;
}