#canvas {
  box-shadow: 0px 0px 3px black;
  width: 54vmin;
  height: 70vmin;
  margin: 20vmin auto;
  position: relative;  
}

#green, #orange, #pink, #blue, #ocre, #red, #purple, #grey, #blue2, #green2, #orange2, #pink2, #blue3, #ocre2, #red2, #purple2, #grey2, #lastblue {
  position: absolute;
  width: 3vmin;
  height: 70vmin;
  top: 0vmin;
  left: 0vmin;   
} 

#green{
  background-color: green;
  left: 0vmin;  
}


#orange{
  background-color: orangered;
    left: 3vmin;  
}

#pink{
  background-color: hotpink;
  left: 6vmin;  
}

#blue{
  background-color: royalblue;
  left: 9vmin;  
}

#ocre{
  background-color: burlywood;
  left: 12vmin;  
}

#red{
  background-color: red;
  left: 15vmin;  
}

#purple{
  background-color: mediumpurple;
  left: 18vmin;  
}

#grey{
  background-color: lightgray;
  left: 21vmin;  
}

#blue2{
  background-color: royalblue;
  left: 24vmin;  
}

#green2{
  background-color: green;
  left: 27vmin;  
}

#orange2{
  background-color: orangered;
  left: 30vmin;  
}

#pink2{
  background-color: hotpink;
  left: 33vmin;  
}

#blue3{
  background-color: royalblue;
  left: 36vmin;  
}

#ocre2{
  background-color: burlywood;
  left: 39vmin;  
}

#red2{
  background-color: red;
  left: 42vmin;  
}

#purple2{
  background-color: mediumpurple;
  left: 45vmin;  
}

#grey2{
  background-color: lightgrey;
  left: 48vmin;  
}

#lastblue{
  background-color: royalblue;
  left: 51vmin;  
}