* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

div#container {
  background-color: cornflowerblue;
  display: grid;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 10px;
  grid-template-columns: 20px 100px 20px 1fr 70px 20px;
  grid-template-rows: 60px 50px 400px 370px 20px;
  grid-template-areas: ". . header header . . " "aside aside  nav  nav     . . " "aside aside  main  main   . . " "aside aside    .     .    . . " "footer footer footer footer footer footer ";
}
div#container > header {
  grid-area: header;
  height: 50px;
  background-color: plum;
  justify-content: space-around;
  align-items: center;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
}
div#container > header > h1 {
  font-size: 3rem;
  align-items: center;
  justify-self: stretch;
}
div#container > nav {
  grid-area: nav;
  background-color: plum;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  align-content: center;
}
div#container > nav > .flex-container {
  display: flex;
}
div#container > nav > ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
div#container > main {
  grid-area: main;
  background-color: plum;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
}
div#container aside {
  background-color: plum;
  justify-content: center;
}
div#container aside > img {
  max-height: 400px;
  max-width: 80px;
}
div#container > footer {
  grid-area: footer;
  background-color: plum;
}/*# sourceMappingURL=style.css.map */