.box {
  max-width: 1000px;
  margin: 30px auto;
  padding: 0px;
  display: grid;
  box-sizing: border-box;
  font-family: "Fraunces", "sans-serif";
  background-color: rgb(213, 227, 222);
  grid-gap: 10px;
  grid-template-columns: 300px minmax(0, 1fr);
}

header, nav, main, footer {
  border: black 2px solid;
}

header {
  background-color: rgb(150, 214, 164);
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  text-align: center;
}

nav {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: rgb(235, 237, 180);
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  height: max-content;
  padding: 14px;
  gap: 14px;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}