html, body {
  margin: 0;
  padding: 0;
  background: #fff;
}

#sketchContainer {
  position: relative;
  display: inline-block;
}

#sketchContainer canvas {
  display: block;
}

input[type=range].customSlider {
  width: 100%;
  margin: 4.25px 0;
  background-color: transparent;
  -webkit-appearance: none;
}

input[type=range].customSlider:focus {
  outline: none;
}

input[type=range].customSlider::-webkit-slider-runnable-track {
  background: #a9a4c8;
  border: 1px solid #010101;
  border-radius: 6.2px;
  width: 100%;
  height: 7.5px;
  cursor: pointer;
}

input[type=range].customSlider::-webkit-slider-thumb {
  margin-top: -5.25px;
  width: 21px;
  height: 16px;
  background: #ffffff;
  border: 1.8px solid #00001e;
  border-radius: 5px;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type=range].customSlider:focus::-webkit-slider-runnable-track {
  background: #b8b4d2;
}

input[type=range].customSlider::-moz-range-track {
  background: #a9a4c8;
  border: 1px solid #010101;
  border-radius: 6.2px;
  width: 100%;
  height: 7.5px;
  cursor: pointer;
}

input[type=range].customSlider::-moz-range-thumb {
  width: 21px;
  height: 16px;
  background: #ffffff;
  border: 1.8px solid #00001e;
  border-radius: 5px;
  cursor: pointer;
}