.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-gap: 10px;
  grid-template: repeat(12, 1fr) / repeat(6, 1fr);
}

h1, h2, h3 {
  font-family: sans-serif;
  text-align: center;
  color: white;
}

h1, h2 {
  color: white;
}

h3 {
  font-color: dodgerblue;
}

header {
  background-color: dodgerblue;
  grid-area: 1 / 1 / 3 / 7;
}

nav {
  background-color: dodgerblue;
  grid-area: 3 / 1 / 4 / 7;
}

.left {
  background-color: dodgerblue;
  grid-area: 4 / 1 / 9 / 5;
}

.right {
  background-color: dodgerblue;
  grid-area: 4 / 5 / 9 / 7;

}

.overlap {
  background-color: beige;
  grid-area: 6 / 4 / 8 / 6;
  z-index: 5;

}

footer {
  background-color: dodgerblue;
	grid-area: 9 / 1 / 13 / 7;
}

@media only screen and (max-width: 960px) {
}

@media only screen and (max-width: 700px) {
}

@media only screen and (max-width: 500px) {
  h1 {
    font-size: 2rem;
  }
  footer nav {
    display: none;
  }
}