html, body {
  margin: 0;
  padding: 0;
  background-color:#333333;
}
canvas {
  display: block;
  margin: auto;
  margin-top:15px;
}
p{
  font-family: 'Nova Square', cursive;
}

footer{
  color:#d0d0d0;
  position:absolute;
  bottom:7px;
  left:620px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #e0e0e0;
      margin-left:0px;
      outline:none;
      position:absolute;
      left:80px;
      bottom:10px;
      width:100px;
      border-radius:5px;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
      border-radius:5px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: pointer;
      background: #222222;
      box-shadow: -80px 0 0 80px #636363;
      border-radius:5px;
    }

}

.vol{
  color:#d0ddd0;
  position:absolute;
  left:20px;
  bottom:-9px;
}