html {
  box-sizing: border-box;
  font-family: 'Roboto', 'Helvetica', sans-serif;
  background-color: royalblue;
}

body {
  /* font-weight: 100; */
  color: midnightblue;
  margin: 0px;
  padding: 0px;
  line-height: 1.4;
}

/* .container {
  width: 1024px;
  min-height: 300px;
  margin-left: auto;
  margin-right: auto;
} */

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 75px auto 100px;
  height: 100vh;
  /* grid-gap: 20px; */

  /* grid-template-areas: 
  'header header header header'
  'main main sidebar sidebar'
  'footer footer footer footer';
  grid-template-rows: 75px auto 100px; */
}

.header {
  grid-column-start: 1;
  grid-column-end: -1;
  background-color: royalblue;
  color: lightgoldenrodyellow;
  text-decoration: none;
  margin: 0px 0px 0px 0px;
  padding: 0px 50px;
}

.header a{
  text-decoration: none;
}

.main {
  grid-column-start: 1;
  grid-column-end: 4;
  margin: 0px;
  padding: 0px 50px;
  background-color: #FFFADF;
}

.sidebar {
  grid-column-start: 4;
  grid-column-end: 5;
  background-color: lightsteelblue;
  padding: 10px;
}

.footer {
  grid-column-start: 1;
  grid-column-end: -1;
  background-color: royalblue;
  color: lightgoldenrodyellow;
  text-align: center;
  /* margin: 0px; */
  padding: 1rem;
}

/* Media Queries */
@media (max-width: 700px) {

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
  }

  .header {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .main {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .sidebar {
    grid-column-start: 1;
    grid-column-end: -1;
    padding: 0px 50px;
  }

  .footer {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}