* {
  box-sizing: border-box;
}

body {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 22px;
  background-color: transparent;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 1px 16px;
}

.previous {
  border-radius: 15px;
  border: 2px solid #2a7d98;
  color: #2a7d98;
}

.nav a:hover {
  background-color: #86cbf7de;
  color: white;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header header header header"
    "nav nav nav nav nav nav"
    "title title title title title title"
    "article arctile article article article article"
    "article-img article-img article-img article-img article-img article-img"
    "more-info more-info more-info more-info more-info more-info"
    "more-info-img more-info-img more-info-img more-info-img more-info-img more-info-img";
  gap: 10px;
  background-color: white;
  padding: 20px;
}

h3, h2 {
  font-family: 'Hammersmith One';
  font-size: 22px;
  color: #2a7d98;
}

h3 {
  font-size: 24px;
  color: #2a7d98;
}

#title {
  text-align: center;
  color: #2a7d98;
  margin-right: 14%;
}

.grid-container .article1 {
  font-size: 18px;
  color: #2a7d98;
  text-align: left;
  margin: 20px;
}
.grid-container .article-img1 {
  display: flex;
  justify-content: center;
  margin: 20px;
}
.grid-container .article2 {
  font-size: 18px;
  color: #2a7d98;
  text-align: left;
  margin: 20px;
}
.grid-container .article-img2 {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.grid-container .more-info1 {
  font-size: 18px;
  color: #2a7d98;
  text-align: left;
  margin: 20px;
}
.grid-container .more-info-img1 {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.grid-container .more-info2 {
  font-size: 18px;
  color: #2a7d98;
  text-align: left;
  margin: 20px;
}
.grid-container .more-info-img2 {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.sundial-image {
  width: 300px;
  height: auto;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: left;
}

#menu {
  align-content: start;
}

#menu ul {
  list-style: none;
  align-items: start;
}

#menu li {
  display: inline-flex;
}

@media only screen and (max-width: 600px) {
  .header {
    grid-area: 1 / span 6;
  }
  .nav {
    grid-area: 2 / span 2;
  }
  .title {
    grid-area: 2 / span 4;
  }
  .article1 {
    grid-area: 3 / span 6;
  }
  .article-img1 {
    grid-area: 4 / span 6;
  }
  .article2 {
    grid-area: 5 / span 6;
  }
  .article-img2 {
    grid-area: 6 / span 6;
  }
  .more-info1 {
    grid-area: 7 / span 6;
  }
  .more-info-img1 {
    grid-area: 8 / span 6;
  }
  .more-info2 {
    grid-area: 9 / span 6;
  }
  .more-info-img2 {
    grid-area: 10 / span 6;
  }
  .footer {
    border: 4px solid #075c90de;
    border-radius: 12px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media only screen and (min-width: 600px) {
  .header {
    grid-area: 1 / span 6;
  }
  .nav {
    grid-area: 2 / span 2;
  }
  .title {
    grid-area: 2 / span 4;
  }
  .article1 {
    grid-area: 3 / span 6;
  }
  .article-img1 {
    grid-area: 4 / span 6;
  }
  .article2 {
    grid-area: 5 / span 6;
  }
  .article-img2 {
    grid-area: 6 / span 6;
  }
  .more-info1 {
    grid-area: 7 / span 6;
  }
  .more-info-img1 {
    grid-area: 8 / span 6;
  }
  .more-info2 {
    grid-area: 9 / span 6;
  }
  .more-info-img2 {
    grid-area: 10 / span 6;
  }
  .footer {
    border: 6px solid #075c90de;
    border-radius: 18px;
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media only screen and (min-width: 768px) {
  .header {
    grid-area: 1 / span 6;
  }
  .nav {
    grid-area: 2 / span 2;
  }
  .title {
    grid-area: 2 / span 4;
  }
  .article1 {
    grid-area: 3 / span 3;
  }
  .article-img1 {
    grid-area: 3 / span 3;
  }
  .article2 {
    grid-area: 4 / span 3;
  }
  .article-img2 {
    grid-area: 4 / span 3;
  }
  .more-info1 {
    grid-area: 5 / span 3;
  }
  .more-info-img1 {
    grid-area: 5 / span 3;
  }
  .more-info2 {
    grid-area: 6 / span 3;
  }
  .more-info-img2 {
    grid-area: 6 / span 3;
  }
  .footer {
    border: 12px solid #075c90de;
    border-radius: 30px;
    margin-left: 20px;
    margin-right: 20px;
  }
}