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

div#container {
  height: 100vh;
  background-color: bisque;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: auto 80px 1fr  100px 100px;
      grid-template-rows: auto 80px 1fr  100px 100px;
      grid-template-areas: " header "
 "nav"
 "main"
 "aside"
 "footer";
}

div#container > header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: header;
  padding: 2em;
  background-color: blue;
  text-align: center;
}

div#container > nav {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: nav;
  background-color: red;
}

div#container > nav > ul {
  list-style-type: none;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

div#container > nav > ul > li > a {
  border-radius: 15px;
  background-color: aqua;
  padding: 15px;
  display: block;
}

div#container > main {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: main;
  background-color: aquamarine;
}

div#container > main > h1 {
  text-align: center;
}

div#container > main > div.animering {
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-animation-name: example;
          animation-name: example;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

div#container > main > div.animering from {
  background-color: red;
}

div#container > main > div.animering to {
  background-color: yellow;
}

div#container > main > article {
  max-width: 400px;
}

div#container > aside {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: aside;
  background-color: #525252;
}

div#container > aside > h2 {
  text-align: center;
}

div#container > footer {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: footer;
  background-color: chartreuse;
}

@media screen and (min-width: 600px) {
  div#container {
    -ms-grid-columns: 50px 100px 2fr 1fr 50px;
        grid-template-columns: 50px 100px 2fr 1fr 50px;
    -ms-grid-rows: auto 80px 1fr  100px;
        grid-template-rows: auto 80px 1fr  100px;
        grid-template-areas: " header header header header header"
 "nav nav nav nav nav"
 ". main main aside ."
 "footer footer footer footer  footer";
  }
}
/*# sourceMappingURL=mall.css.map */