*{ box-sizing: border-box; }
nav{
  width: 100%;
  display: inline-block;
  margin-bottom: 5vmin;
  text-align: center;
} 
nav a{
 display: inline-block;
  text-align: center;

} 
div{
  padding-top: 10px;
  margin-right:10px;
}
body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

h1 {
  font-family: "Merriweather", serif;
  font-size: 22px;
  text-align: center;
}
p{
  text-align: center;
  font-size: 25px;
}
#canvas {
  background-color: #03558d;
  width: 53vmin; 
  height: 73vmin;
  margin: 0 auto;
  position: relative;
}

#green, #orange, #pink, #blue, #yellow, #red, #purple, #gray, #indigo, #green2,#orange2, #pink2, #blue2, #yellow2, #red2, #purple2, #gray2, #indigo2 { 
  position: absolute;
  left: 0vmin;
  top: 0vmin;
  width: 3vmin;
  height: 73vmin;
  background-color: #008026; 
    
  }

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

#pink {
  left: 6vmin;
  background-color: #cc166b;
}
#blue {
  left: 9vmin;
  background-color: #114b9d
}
#yellow {
  left: 12vmin;
  background-color: #e07f2e
}#red {
  left: 15vmin;
  background-color: #d10003
}#purple {
  left: 18vmin;
  background-color: #904f9f
}#gray{
  left: 21vmin;
  background-color: #a5aeb5
}
#indigo {
  left: 24vmin;
  background-color: #134ba0;
}
#green2 {
  left: 27vmin;
  background-color: #008026;
}
#orange2 {
  left: 30vmin;
  background-color: #ff541c;
}
#pink2 {
  left: 33vmin;
  background-color: #cc166b;
}
#blue2 {
    left: 36vmin;
    background-color: #114b9d
  }
  #yellow2 {
    left: 39vmin;
    background-color: #e07f2e
  }#red2 {
    left: 42vmin;
    background-color: #d10003
  }#purple2 {
    left: 45vmin;
    background-color: #904f9f
  }#gray2{
    left: 48vmin;
    background-color: #a5aeb5
  }
  #indigo2 {
    left: 51vmin;
    background-color: #134ba0;

/*#green { 
  position: absolute;
  left: 27vmin;
  top: 0vmin;
  width: 3vmin;
  height: 73vmin;
  background-color: #008026; 

}*/