#canvas{
  width: 50vmin;
  margin: 25vmin auto 3vmin auto;
  height: 60vmin;
  background-color: black;
  position: relative;

}

#blue{
  width:20%;
  height: 100%;
  background-color: rgb(70,85,153);
  position: absolute;    
}


#darkblue{

  left: 20%;
  width:10%;
  height: 100%;
  background-color: rgb(40,50,100);
  position: absolute;
}

#jeanblue{

  left: 30%;
  width:10%;
  height:100%;
  background-color: rgb(58,85,115);
  position: absolute;
}
 
#yellow{

  left: 40%;
  width:10%;
  height: 100%;
  background-color: rgb(249,227,168);
  position: absolute;
}

#boldblue{

  left: 50%;
  width:10%;
  height: 100%;
  background-color: rgb(40,50,98);
  position: absolute;
}

#peach{

  left: 60%;
  width:10%;
  height: 100%;
  background-color: rgb(229,169,129);
  position: absolute;
}


#lightpurple{

  left: 70%;
  width:10%;
  height: 100%;
  background-color: rgb(144,114,128);
  position: absolute;
}
#darkblue2{

  left: 80%;
  width:10%;
  height: 100%;
  background-color: rgb(40,50,100);
  position: absolute;
}

#jeanblue2{

  left: 90%;
  width:10%;
  height:100%;
  background-color: rgb(58,85,115);
  position: absolute;
}