pythagoras.css

* {margin:0;padding:0;font-size:14px;font-family:helvetica,arial,sans-serif}
body {background:#111;color:white;}
footer, section, header {display:block;}
canvas {display:block;background:black}
section {margin:0 auto;width:800px;}
input {margin:0 .5em}
form {position:relative;}
button {margin:0 .5em 0 0;position:absolute;right:0;top:5px}
form { background: black; color:white; padding:10px; }
footer, p { color:white; width:790px; text-align:right; padding:5px; margin:0 auto; }
p {text-align:left;padding:1em 0}
footer a {color:#ccc;}
h1 {margin:10px auto;width:800px;color:#fff;font-size:30px;font-family:Futura,helvetica,sans-serif;font-weight:normal}
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 140px;
  height: 10px; /* Specified height */
  background: #333333; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 14px;
  background: white;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 14px;
  background: white;
  cursor: pointer;
}