@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
html, body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  font-family: "Roboto", sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 0.5em 0;
}

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
  grid-template-areas: "header header" "navigation content" "footer footer";
  height: 100vh;
  width: 100vw;
}

.header, .footer {
  background-color: #008843;
  color: white;
  padding: 10px;
  text-align: center;
}

.header {
  grid-area: header;
}
.header .menu-button {
  float: left;
}

.footer {
  grid-area: footer;
}

.content {
  grid-area: content;
  padding: 10px;
}

.center {
  text-align: center;
}

.navigation {
  grid-area: navigation;
}

#navigation-menu {
  display: block;
  width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #ddd;
  padding: 10px;
}
#navigation-menu li {
  display: block;
  width: 100%;
}
#navigation-menu li:hover {
  background-color: #aaa;
}
#navigation-menu li a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10px;
}
#navigation-menu li a:hover {
  color: black;
}