#canvas{
  width: 54vmin;
  height: 70vmin;
  margin: 15vmin auto 0 auto;
  position: relative;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 2px black;  
}

#green, #orange, #pink, #blue, #yellow, #red, #purple, #grey, #lightblue,
#green2, #orange2, #pink2, #blue2, #yellow2, #red2, #purple2, #grey2, #lightblue2{
  position: absolute;
  left: 0vmin;
  top: 0vmin;
  width: 3vmin;
  height: 70vmin;
  background-color: rgb(57, 123, 51);
}

#orange{
  left: 3vmin;
  background-color: rgb(234, 95, 49);
  
}

#pink{
  left: 6vmin;
  background-color: rgb(185, 48, 95);
}

#blue{
  left: 9vmin;
  background-color: rgb(37, 74, 151);
}
  
#yellow{
  left: 12vmin;
  background-color: rgb(208, 138, 72);  
}  
  
#red{
  left: 15vmin;
  background-color: rgb(196, 42, 32);  
}  
  
#purple{
  left: 18vmin;
  background-color: rgb(133, 85, 157);  
}  

#grey{
  left: 21vmin;
  background-color: rgb(177, 183, 198);  
}

#lightblue{
  left: 24vmin;
  background-color: rgb(41, 102, 147);  
}

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

#orange2{
  left: 30vmin;
  background-color: rgb(234, 95, 49);

}

#pink2{
  left: 33vmin;
  background-color: rgb(185, 48, 95);
}

#blue2{
  left: 36vmin;
  background-color: rgb(37, 74, 151);
}

#yellow2{
  left: 39vmin;
  background-color: rgb(208, 138, 72);  
}  

#red2{
  left: 42vmin;
  background-color: rgb(196, 42, 32);  
}  

#purple2{
  left: 45vmin;
  background-color: rgb(133, 85, 157);  
}  

#grey2{
  left: 48vmin;
  background-color: rgb(177, 183, 198);  
}

#lightblue2{
  left: 51vmin;
  background-color: rgb(41, 102, 147);  
}

body{
  font-family: "Arial Narrow", "Helvetica Condensed", 
    "Myriad Pro Condensed", sans-serif;
}

nav{
  padding: 14px 16px;
  text-align: center;
  background-color: #333;
}

nav a{
  text-decoration: none;
  color: white;
  padding: 14px 16px;
}
a:hover{
  color: white;
  background-color: cadetblue;
}

a:active{
  text-decoration: none;
  color: black;
}