html, body {
  margin: 0;
  padding: 0;
  max-width:100%;
  max-height:100%;
}
canvas {
  display: block;
}

/*Slider test*/

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 8.3px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(83, 43, 33, 0.32);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  border: 0.3px solid #160000;
  height: 25px;
  width: 28px;
  border-radius: 12px;
  background: #676e76;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(101, 52, 40, 0.32);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(83, 43, 33, 0.32);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  border: 0.3px solid #160000;
  height: 25px;
  width: 28px;
  border-radius: 12px;
  background: #676e76;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(65, 34, 26, 0.32);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: rgba(83, 43, 33, 0.32);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  border: 0.3px solid #160000;
  height: 25px;
  width: 28px;
  border-radius: 12px;
  background: #676e76;
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(83, 43, 33, 0.32);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(101, 52, 40, 0.32);
}

/*Button to reset*/

*{padding:0;margin:0;}

body{
    font-family:Verdana, Geneva, sans-serif;
    font-size:37px;
    background-color:#CCC;
}

.float{
    cursor: pointer;
    position:fixed;
    width:60px;
    height:60px;
    bottom:120px;
    right:40px;
    background-color:#3399ff;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
}

.my-floatBack{
    cursor: pointer;
    position:fixed;
    width:60px;
    height:60px;
    bottom:50px;
    right:40px;
    background-color:#3399ff;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
}

.float:hover{
    background-color:#5cbf2a;
}

.my-floatBack:hover{
    background-color:#5cbf2a;
}

.my-float{
    margin-top:12px;
}

.button {
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
  background-color:#ffffff;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:Arial;
  font-size:15px;
  font-weight:bold;
  padding:6px 10px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
}
.button:hover {
  background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
  background-color:#f6f6f6;
}
.bbutton:active {
  position:relative;
  top:1px;
}
