margin: 0;

  padding: 0;

  height: 100%; 

  overflow: hidden

}

canvas {

  display: block;

}

​

input[type=range] {

  -webkit-appearance: none;

  width: 100%;

  margin: 9.7px 0;

}

input[type=range]:focus {

  outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

  width: 100%;

  height: 5.6px;

  cursor: pointer;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

  background: rgba(193, 194, 195, 0.75);

  border-radius: 1.1px;

  border: 0.3px solid #1f2023;

}

input[type=range]::-webkit-slider-thumb {

  box-shadow: 1px 1px 1px #010d11, 0px 0px 1px #021f29;

  border: 1.6px solid #434344;

  height: 25px;

  width: 25px;

  border-radius: 35px;

  background: #ffffff;

  cursor: pointer;

  -webkit-appearance: none;

  margin-top: -10px;

}

input[type=range]:focus::-webkit-slider-runnable-track {

  background: rgba(206, 207, 208, 0.75);

}

input[type=range]::-moz-range-track {

  width: 100%;

  height: 5.6px;

  cursor: pointer;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

  background: rgba(193, 194, 195, 0.75);

  border-radius: 1.1px;

  border: 0.3px solid #1f2023;

}

input[type=range]::-moz-range-thumb {

  box-shadow: 1px 1px 1px #010d11, 0px 0px 1px #021f29;

  border: 1.6px solid #434344;

  height: 25px;

  width: 25px;

  border-radius: 35px;

  background: #ffffff;

  cursor: pointer;

}

input[type=range]::-ms-track {

  width: 100%;

  height: 5.6px;

  cursor: pointer;

  background: transparent;

  border-color: transparent;

  color: transparent;

}

input[type=range]::-ms-fill-lower {

  background: rgba(180, 181, 182, 0.75);

  border: 0.3px solid #1f2023;

  border-radius: 2.2px;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

}

input[type=range]::-ms-fill-upper {

  background: rgba(193, 194, 195, 0.75);

  border: 0.3px solid #1f2023;

  border-radius: 2.2px;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

}

input[type=range]::-ms-thumb {

  box-shadow: 1px 1px 1px #010d11, 0px 0px 1px #021f29;

  border: 1.6px solid #434344;

  height: 25px;

  width: 25px;

  border-radius: 35px;

  background: #ffffff;

  cursor: pointer;

  height: 5.6px;

}

input[type=range]:focus::-ms-fill-lower {

  background: rgba(193, 194, 195, 0.75);

}

input[type=range]:focus::-ms-fill-upper {

  background: rgba(206, 207, 208, 0.75);

}

​