*{box-sizing: border-box; }

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

h1 {
  font-size: 22px;
  text-align: center;
}

nav{
  width: 100%;
  display: inline-block;
  margin-bottom: 5vmin;
  text-align: center;
} 
nav a{
 display: inline-block;
  text-align: center;
}
#canvas{
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat( 6, 1fr);
  background-color:#8498b3;
  width: 80vmin; 
  height: 60vmin;
  position: relative;
  margin: 5vmin auto;
}
#one{ background-color: #3a3e3f; 
  grid-column: 1 / 3;
  grid-row: 1 / 4;
}
#two{ background-color: #303531; 
  grid-column: 7 / 15;
  grid-row: 1 / 4;
}
#three{
  background-color: #6b8270;
  grid-column: 7 / 15;
  grid-row: 4 / 5;
}
#four{
  background-color: #535e7c;
  grid-column: 1 / 3;
  grid-row: 4 / 6; 
}
#five{
  background-color: #343935;
  grid-column: 1 / 3;
  grid-row: 6 / 7; 
}
#six{
  background-color: #7489a4;
  grid-column: 3/ 5;
  grid-row: 1 / 2;
}
#seven{
  background-color: #7489a4;
  grid-column: 3 / 5;
  grid-row: 6 / 7;
}
#eight{
  background-color: #a48267;
  grid-column: 5 / 6;
  grid-row: 1;
}
#nine{
  background-color: #b12a39;
  grid-column: 6 / 7;
  grid-row: 1;
}
#ten{
  background-color: #242426;
  grid-column: 5 / 7;
  grid-row: 2 / 6;
}
#eleven{
  background-color: #343935;
  grid-column: 5 / 8;
  grid-row: 6 / 7;
}
#twelve{
  background-color: #242426;
  grid-column: 5 / 17;
  grid-row: 5;
}
#thirteen{
  background-color: #a7856a;
  grid-column: 8 / 14;
  grid-row: 6 / 7; 
}
#fourteen{
    background-color: #343935;
    grid-column: 14 / 17;
    grid-row: 6 / 7;
}
#fifthteen{
  background-color: #a48267;
  grid-column: 15 / 16;
  grid-row: 1;
}
#sixteen{
  background-color: #b12a39;
  grid-column: 16 / 17;
  grid-row: 1;
}
#seventeen{
  background-color: #242426;
  grid-column: 15 / 17;
  grid-row: 2 / 6;
}
#eighteen{
  background-color: #343935;
  grid-column: 15 / 18;
  grid-row: 6 / 7;
}
#nineteen{
  background-color: #535e7c;
  grid-column: -1 / -3;
  grid-row: 4 / 6; 
}
#twenty{
  background-color: #343935;
  grid-column: -1 / -3;
  grid-row: 6 / 7; 
}
#twentyone{
  background-color: #7489a4;
  grid-column: -3/ -5;
  grid-row: 1 / 2;
}
#twentytwo{
  background-color: #7489a4;
  grid-column: -3 / -5;
  grid-row: 6 / 7;
}
#twentythree{
  background-color: #3a3e3f; 
  grid-column: -1 / -3;
  grid-row: 1 / 4;
}