html, body{
  position: relative;
  height: 100%;
  width: 100%;
}

body{
  overflow: hidden;
}

header{
  background: #f83;
  padding: 4px 10px 4px;
  position: fixed;
  top: 0;
  width: 100%;
}

article{
  position: relative;
}

.wrapper{
  background: #eee;
  margin: 10% auto 10%;
  padding: 10px 10px 10px;
  width: 980px;
}

.wrapper .graph,
.wrapper .shadow,
.wrapper .graph-mask{
  height: 20px;
  width: 950px;
}

.wrapper .graph{
  background: linear-gradient( 90deg, #f00, #ff0 50%, #0f0, #00f );
  border: #666 1px solid;
  border-radius: 2px;
  margin: 30px auto 30px;
  position: relative;
}

.wrapper .shadow{
  background: linear-gradient( 0, #000, #fff, #000 );
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  z-index: 100;
}

.wrapper .graph-mask{
  background: #ddd;
  position: absolute;
  right: 0;
  transition: 0.4s all;
  width: 0;
  z-index: 90;
}





.wrapper .buttons{
  margin: 0 auto 20px;
  width: 950px;
}

.wrapper .buttons .button{
  font-size: 20px;
  margin-right: 10px;
  padding: 5px 10px 5px;
}




footer{
  background: #f83;
  bottom: 0;
  padding: 4px 0 4px; 
  position: fixed;
  text-align: center;
  width: 100%;
}