body {
  padding: 10px 20px;
  background-color: rgb(245, 255, 160);
  font-family: 'Chivo', monospace;
  font-family: 'Asul', monospace;
  font-size: 100%;
}

h2
{
  font-family: 'Asul', serif;
  font-size:36pt;
}

    {
        font-family: 'Chivo', sans-serif;
        font-family: 'Asul', sans-serif;
        font-size: 36pt;
    }
    
/* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: deeppink;
  font-style: bold;
}

/* selected link */
a:active {
  color: yellow;
}
.container {
  border: 3px solid black;
  background-color: rgb(226, 226, 226);
  padding: 0px;
  max-width: 940px;
  margin: 0 auto;
  /* grid css */
  display: grid;
  /* "fr" is "fraction" */
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows:minmax(60px, auto);
  grid-gap: 20px;
  width: 940px;
}

#box1 {
  grid-column: 4 / 6;
  grid-row: 1;
  background-color: blue;
  padding: 20px;
}

#box2 {
  grid-column: 7;
  grid-row: 1;
  background-color: blue;
  padding: 20px;
}

#box3 {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
  background-color: blue;
  padding: 20px;
}

#box4 {
  grid-column: 3 / 5;
  grid-row: 3 / 8;
  background-color: blue;
  padding: 20px;
}
#box5 {
  grid-column: 5;
  grid-row: 3;
  background-color: blue;
  padding: 20px;
}

#box6 {
  grid-column: 5;
  grid-row: 5;
  background-color: blue;
  padding: 20px;
}

#box7 {
  grid-column: 7 / 11;
  grid-row: 3 / 7;
  background-color: blue;
  padding: 20px;
}

#box8 {
  grid-column: 11;
  grid-row: 2 / 5;
  background-color: blue;
  padding: 20px;
}
#box9 {
  grid-column: 9 / 11;
  grid-row: 8;
  background-color: blue;
  padding: 20px;
}