html {
  font-size: 16px;
  height: 100vh;
  width: 100vw;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  margin: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: max(5rem) 1fr 5rem;


  grid-template-areas:
    "header header header"
    "nav content content"
    "footer footer footer"
}


@media (max-width: 768px) {
  body {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "footer";

    grid-template-columns: 1fr;
    grid-template-rows:
      5rem minmax(5rem, auto) 1fr 5rem;
  }
}

header {
  grid-area: header;

}

nav {
  grid-area: nav;
  overflow: auto;
}

main {
  grid-area: content;

}

footer {
  grid-area: footer;

}