@media (max-width: 900px) {
  footer > * {
    padding: 5px;
    width: auto;
  }
  .footer-flex {
    display: block;
  }
  .article {
    padding: 5px;
    width: auto;
  }

  #features {
    display: block;
    width: auto;
  }
}

@media (max-width: 800px) {
  #hamburger-label {
    display: block;
    color: var(--black);
    position: absolute;
    right: 2em;
    top: 20px;
  }

  #hamburger-label img {
    height: 32px;
  }

  #hamburger ~ ul {
    display: none;
  }

  #hamburger:checked ~ ul {
    display: block;
  }

  header {
    align-items: start;
  }

  header span {
    font-size: 2.7em;
  }

  #hero {
    background: url('/images/screen.png') no-repeat -70px -50px #dde2dd;
    background-size: 300px;
    padding-bottom: 15px;
    padding-left: 15px;
    position: absolute;
    top: 0px;
  }

  #hero h1 {
    text-align: right;
    margin-top: 6em;
    text-shadow: 1px 1px #00574B
  }

  #after-hero {
    margin-top: 10em;
  }
}