html, body {
  margin: 0;
  padding: 0;
  overflow:hidden;
}
button{
  width: 10%;
  height: 5%;
}
.green-button{
  background-color: green;
}
.red-button{
  background-color: red;

}
.blue-button{
  background-color: blue
}
canvas {
  display: block;
}
.mySlider{
  background-color: transparent;
  -webkit-appearance: none;
}

.mySlider::-webkit-slider-runnable-track {
  background: tan;
  height: 3px;
  -webkit-appearance: none;
  
  /* Turns the cursor into the hand pointer icon when hovering over the slider  */
  cursor: pointer;
  
}

.mySlider::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  
  /* negative top padding moves it up */
  margin-top: -6px;

  
  /* Border radius gives rounded corners, if they're big enough, you end up with circles */
  border-radius: 8px;
  
}
.red-slider::-webkit-slider-thumb{

  background: red;
  
  }
.green-slider::-webkit-slider-thumb{

  background: green;
  
}
.blue-slider::-webkit-slider-thumb{
  background:blue
}