#canvas{
  width: 64vmin;
  margin: 18vmin auto 3vmin auto;
  height: 86vmin; 
  background-color: rgb(235,235,235);
  position: relative;  
}

#blueone{
  left: 11%;
  top: 2.3%;
  width: 36%;
  height: 15%;
  background-color: rgb(65,48,168);
  position: absolute;     
}

#blackone{
  left: 11%;
  top: 16.4%;
  width: 27.5%;
  height: 10%;
  background-color: rgb(33,34,36);
  position: absolute; 
}

#bluetwo{
  left: 11%;
  top: 26.4%;
  width: 21%;
  height: 71.3%;
  background-color: rgb(65,48,168);
  position: absolute; 
}

#yellowone{
  left: 38%;
  top: 16.4%;
  width: 9%;
  height: 81.4%;
  background-color: rgb(244,230,55);
  position: absolute; 
}

#yellowtwo{
  left: 53%;
  top: 2.3%;
  width: 9%;
  height: 81.4%;
  background-color: rgb(244,230,55);
  position: absolute; 
}

#bluethree{
  left: 62%;
  top: 2.3%;
  width: 8%;
  height: 81.4%;
  background-color: rgb(65,48,168);
  position: absolute;
}

#blacktwo{
  left: 70%;
  top: 2.3%;
  width: 15%;
  height: 56%;
  background-color: rgb(33,34,36);
  position: absolute;
}

#bluefour{
  left: 85%;
  top: 2.3%;
  width: 5%;
  height: 56%;
  background-color: rgb(65,48,168);
  position: absolute;
}

#blackthree{
  left: 53%;
  top: 81.8%;
  width: 36%;
  height: 16%;
  background-color: rgb(33,34,36);
  position: absolute;
}