#canvas{
  width: 80vmin;
  margin: 18vmin auto 3vmin auto;
  height: 80vmin; 
  background-color: rgb(77,75,164);
  position: relative;
}

#one{
  left: 20%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(39,38,92);
  position: absolute;   
}

#two{
  left: 30%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(49,81,117);
  position: absolute;   
}

#three{
  left: 40%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(227,223,157);
  position: absolute;    
}

#four{
  left: 50%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(38,30,90);
  position: absolute;
}

#five{
  left: 60%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(237,154,108);
  position: absolute;  
}

#six{  
  left: 70%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(144,99,118);
  position: absolute;   
}

#seven{
  left: 80%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(39,38,92);
  position: absolute;     
}

#eight{
  left: 90%;
  top: 0%;
  width: 10%;
  height: 100%;
  background-color: rgb(49,81,117);
  position: absolute;   
}