@media (max-width: 1400px) {
  main {
    grid-template-columns: 15rem auto;
  }
  nav {
    gap: 1rem;
  }
  nav > .nav-link {
    flex-basis: auto;
  }
}
@media (max-width: 1200px) {
  main {
    padding: 0 0.5rem;
    grid-template-columns: auto auto;
  }
  header {
    padding: 0.5rem;
  }
  nav {
    gap: 0.25rem;
  }
}
@media (max-width: 900px) {
  #content {
    display: block;
  }
  .project > hr {
    display: block;
  }
}
@media (max-width: 800px) {
  main {
    display: block;
  }
  main > div {
    max-width: 100%;
  }
  #currentPic, #logo {
    display: none;
  }
  header {
    grid-template-rows: auto auto;
    grid-template-areas:
      "title title theme"
      "nav nav nav";
  }
}
@media (max-width: 750px) {
  nav {
    flex-direction: column;
    gap: 0.1rem;
  }
  #navLabel {
    width: 100%;
    height: 100%;
    text-align: center;
    display: inline;
    font-size: 150%;
  }
  #navLabel:after {
    content: '☰';
  }
  #navToggle:checked + #navLabel:after {
    content: '🗙';
  }
  .nav-link {
    display: none;
  }
  #navToggle:checked ~ .nav-link {
    display: block;
  }
}
@media (max-width: 600px) {
  main {
    display: block;
  }
  address {
    width: 100%;
    margin: auto;
  }
  address > hr {
    display: block;
  }
  #content {
    padding: 0;
  }
}