html,body {
  margin: 0;
  padding: 0;
background: #222;
}
main {
  text-align: center;
  width: 100%;
}
canvas {
display: block;
}
main {
align-items: center;
display: flex;
height: 100vh; 
justify-content: center;
}
main canvas { 
height: auto !important;
width: auto !important;
max-width: 100%;
max-height: 100%;
display: inline-block; 
margin: 0 auto;
vertical-align: middle;
touch-action: none;
}


input[type=range] {
  background: #3b0000;
  
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  background: #3b0000;
  border: 0.2px solid #010101;
  border-radius: 1.3px;
  height: 6px;
  cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
  width: 12px;
  height: 6px;
  background: #f5ef71;
  border: 8px #s010101;
  -webkit-appearance: none;
}