#canvas{
  background-color:  rgb(220,220,211);
  width:54vmin;
  height:68vmin;
  margin:20vmin auto 0 auto;
  position:relative;
  box-shadow: 0px 0px 14px black;
}

#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15, #box16,  #box17, #box18{
  position:absolute;
  left:0vmin;
  top:0vmin;
  width:3vmin;
  height:68vmin;
  background-color: rgb(58,124,50);
}

#box2{
  left:3vmin;
  background-color: rgb(234,94,53);
}

#box3{
  left:6vmin;
  background-color: rgb(191,50,101);
}

#box4{
  left:9vmin;
  background-color: rgb(37,70,150);
}

#box5{
  left:12vmin;
  background-color: rgb(210,128,65);
}

#box6{
  left:15vmin;
  background-color: rgb(193,41,35);
}

#box7{
  left:18vmin;
  background-color: rgb(130,82,154);
}

#box8{
  left:21vmin;
  background-color: rgb(172,175,188);
}

#box9{
  left:24vmin;
  background-color: rgb(41,96,158);
}

#box10{
  left:27vmin;
  background-color: rgb(47,104,42);
}

#box11{
  left:30vmin;
  background-color: rgb(234,93,55);
}

#box12{
  left:33vmin;
  background-color: rgb(194,51,101);
}

#box13{
  left:36vmin;
  background-color: rgb(38,70,157);
}

#box14{
  left:39vmin;
  background-color: rgb(209,127,60);
}

#box15{
  left:42vmin;
  background-color: rgb(193,41,34);
}
#box16{
  left:45vmin;
  background-color: rgb(110,66,143);
}

#box17{
  left:48vmin;
  background-color: rgb(150,165,185);
}

#box18{
  left:51vmin;
  background-color: rgb(33,80,135);
}