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

body {
  height: auto;
  width: 100vw;
  height: 100vh;
  background-color: #d54c50;
  background-image: url("../img/cal-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

div#container {
  height: 100%;
  overflow-y: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20px 20px 20px 1fr 20px 20px;
      grid-template-columns: 20px 20px 20px 1fr 20px 20px;
  -ms-grid-rows: 100px 100px auto 40px 100px;
      grid-template-rows: 100px 100px auto 40px 100px;
      grid-template-areas: "header header header header header header"
 "nav nav   nav   nav  nav nav"
 ".  . main     main . ."
 ".  . .     .    . ."
 "footer footer footer footer footer footer";
}

div#container > header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 6;
  grid-area: header;
  text-align: center;
}

div#container > header > a {
  text-decoration: none;
  color: black;
}

div#container > nav {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 6;
  grid-area: nav;
}

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

div#container > nav ul a {
  background-color: #d54c50;
  border: none;
  color: #f0f7f4;
  padding: 24px 36px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 16px;
  margin: 5px;
}

div#container > main {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-area: main;
  margin-top: 100px;
}

div#container > main > div {
  width: 50vw;
  margin: auto;
  background-color: #d54c50;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: 16px;
  border-style: solid;
}

div#container > main > div > h2 {
  text-align: center;
  margin: 20px 0px;
}

div#container > main > div > p {
  margin: 20px 30px;
}

div#container > main > img {
  display: block;
  margin: 20px auto;
}

div#container > footer {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 6;
  grid-area: footer;
  width: auto;
  background-color: #d54c50;
  border-style: solid;
}

div#container > footer > h3 {
  text-align: center;
  margin: 10px 0px 15px 0px;
}

div#container > footer > h4 {
  text-align: center;
}

@media only screen and (max-width: 600px) {
  img {
    width: 200px;
    height: auto;
  }
  nav {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-area: nav;
  }
  nav ul a {
    padding: 12px 18px;
  }
}
/*# sourceMappingURL=style.css.map */