#background
#main
  %h1.primary>Gradients
  %p.primary>Press space
  .output>
    #gradient



  

#background { 
 background:linear-gradient( 45deg, black, black); 
    overflow:auto;
  position:fixed;
  top:0;
  right:0;
  left:0;
  bottom:0;
}

#main {
  position:relative;
  text-align:center;
  color:white;
  text-shadow:0 1px 2px black;
  font-family:"Helvetica Neue";

  h1 {
  font-weight:100;    
  margin-top:50px;
  }
  .primary {
    text-transform:uppercase;
    letter-spacing:1em;
  }
  
  .sub {
    font-family:courier;
    font-size:0.6em;
  }
  
  p {  
    margin-bottom:20px;
  }
  
  .output {
    border-radius:5px;
    background-color:rgba(255,255,255,0.2);
    margin:0px auto;
    width:400px;
    padding:20px;
    box-shadow:0 2px 4px rgba(0,0,0,0.5);
    color:black;
    text-shadow:none;
    font-family:"courier";
    font-size:0.8em;
    font-variant-numeric: tabular-nums;
  }
}  

var bg = document.getElementById("background");
var out = document.getElementById("gradient");

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
      randomBackground();
    }
}

document.addEventListener('DOMContentLoaded', function(){ 
  randomBackground();
}, false);

function randomBackground() {
        var from = '#'+Math.floor(Math.random()*16777215).toString(16);
      var to = '#'+Math.floor(Math.random()*16777215).toString(16);
  var deg = Math.floor(Math.random()*100).toString(); 
      var gradient = 'linear-gradient(' + deg + 'deg,' + from + ','+ to + ')';
      bg.style.background = gradient;
  out.innerHTML="background:"+gradient+";";
}