@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

*{ box-sizing:border-box; }
body{ margin: 3vmin;}
#canvas{
  width: 100vmin;
  height: 100vmin;
  background-color: rgb(66, 76, 149);
  margin: 0 auto;
  position: relative;
}
#blue1{ 
  background-color: rgb(39,45,49);
  position:absolute;
  left: 20%; 
  top:0; 
  width: 10%; 
  height: 100%;
}
#blue2{ 
  background-color: rgb(53,76,107);
  position:absolute;
  left: 30%; 
  top:0; 
  width: 10%; 
  height: 100%;
}
#blue3{ 
  background-color: rgb(248,229,172);
  position:absolute;
  left: 40%; 
  top:0; 
  width: 10%; 
  height: 100%;
}
#blue4{ 
  background-color: rgb(37,43,90);
  position:absolute;
  left: 50%; 
  top:0; 
  width: 10%; 
  height: 100%;
}
#blue5{ 
  background-color: rgb(232,172,134);
  position:absolute;
  left: 60%; 
  top:0; 
  width: 10%; 
  height: 100%;
}
#blue6{ 
  background-color: rgb(134,106,122);
  position:absolute;
  left: 70%; 
  top:0; 
  width: 10%; 
  height: 100%;
}
#blue7{ 
  background-color: rgb(38,46,95);
  position:absolute;
  left: 80%; 
  top:0; 
  width: 10%; 
  height: 100%;
}
#blue8{ 
  background-color: rgb(56,79,110);
  position:absolute;
  left: 90%; 
  top:0; 
  width: 10%; 
  height: 100%;
}