`<div class="headline">Scroll as fast as you can!</div>
<div class="container">
  <div class="pixels"></div>
</div>

html{
  min-height: 100%;
  min-width: 100%;
}
body{
  font-family: sans-serif;
  background-color: #2ecc71;
}
.container{
  font-size: 42px;
  text-align: center;
  color: white;
  font-weight: bold;
  padding: auto;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  border-radius: 3px;
}

@keyframes pulse {
    from {font-size: 32px;}
    to {font-size: 40px;}
}

.headline{
  text-align: center;
  font-size: 42px;
  color: #ecf0f1;
  font-weight: bold;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}
.best{
  margin-top: 20px;
}

var rainbow = new Rainbow();
var best = 0;
rainbow.setSpectrum("#2ecc71","#ff9a42","#e74c3c");
rainbow.setNumberRange(0, 25000);
window.addEventListener('wheel', mouseWheelEvent);   
var lastSecond = [];

function mouseWheelEvent(e) {
  lastSecond.push({delta:Math.floor(Math.abs(e.deltaY)), timestamp: new Date().getTime()});
}
setInterval(function(){
  var pixelsPerSecond = displayLastSecond();
  if(pixelsPerSecond > best){
    best = pixelsPerSecond;
  }
  $(".pixels").text(numberWithCommas(pixelsPerSecond) + " pixels per second");
  console.log(makeGradient(pixelsPerSecond));
  $("body").css("background", "#" + rainbow.colourAt(pixelsPerSecond));
  $(".pixels").css("font-size",fontSize(pixelsPerSecond) + "px");
  if(pixelsPerSecond > 0){
    $(".headline").css("display", "none");
    $(".container").css("display", "block");
  }else{
    var headline = "Scroll as fast as you can!";
    if(best > 0){
      headline += "<div class='best'>Your best is "+ numberWithCommas(best)+" pixels per second</div>";
      $(".headline").css("height", "100px");
    }
    $(".headline").html(headline);
    $(".headline").css("display", "block");
    $(".container").css("display", "none");
  }
}, 50);

function displayLastSecond(){
  var now = new Date().getTime();
  var total = 0;
  var timestamps = 0;
  for(var x = 0; x < lastSecond.length; x++){
    if(now - lastSecond[x].timestamp <= 1000){
      total += lastSecond[x].delta;
      timestamps++;
    }else{
      lastSecond.splice(x, 1);
      x--;
    }
  }
  if(timestamps == 0){
    return 0;
  }
  return Math.round(total);
}
function fontSize(pps){
  return 32 + 20 * pps/25000;
}
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function makeGradient(pps){
  var color1 = rainbow.colourAt(pps);
  var color2 = rainbow.colourAt(pps+5000);
  return "radial-gradient(40% 40% at center, #" + color2 + ", #" + color1 + ")";
}