header {
  font-size: 4rem;
  margin: 1rem 0 3rem 0;
  padding-bottom: 1rem;
  border-bottom: solid 3px var(--title);
}
.site-title {
  font-weight: bolder;
  color: var(--title);
}

main h2 {
  font-size: 1.8rem;
  color: var(--subtitle);
}
main h3 {
  font-size: 1.6rem;
}
main h4 {
  font-size: 1.4rem;
}
main h5 {
  font-size: 1.2rem;
}
main h6 {
  font-size: 1rem;
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  margin: 1.75rem 0;
}

/* Viewport size adjustments */

@media screen and (max-width: 1050px) {
  body {
    padding: 1.5rem;
  }
  header {
    flex-direction: column;
    gap: 3rem;
  }
  header .site-title {
    font-size: 3rem;
  }
}

@media screen and (max-width: 550px) {
  header .site-title {
    font-size: 3rem;
  }
}

@media screen and (max-width: 350px) {
  main {
    padding: 0;
    margin: 0;
    padding-bottom: 1rem;
  }
  header .site-title {
    font-size: 2.4rem;
  }
}