@media (max-width: 767px) {

  /* give the nav a background colour and shadow  */
  header {
    background-color: var(--nav);
    box-shadow: 0px 1px 4px var(--shadow);
  }

  /* place the FAP better */
  .scroll-to-top, .scroll-to-top:hover {
    bottom: 30px;
    right: 30px;
  }

  /* reduce font size and line heights since headers will now wrap */
  h1 {
    font-size: 48px;
    line-height: 70px;
    margin-bottom: 30px;
  }

  h2 {
    font-size: 32px;
    line-height: 50px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  h3 {
    font-size: 32px;
    line-height: 40px;
  }

  /* bring the bullet points more left  */
  ul {
    margin-left: 40px;
  }

  /* make the buttons grow to take up the width of the device */
  .button {
    padding: 10px 20px;
    min-width: 100%;
    max-width: fit-content;
  }

  /* add a margin to the "view my work" cta on mobile since the buttons are now stacked  */
  #cta {
    margin-bottom: 20px;
  }

  /* trim the top margin of the intro section and align left instead of centre */
  #intro {
    margin-top: 8vh;
    text-align: left;
    padding: 20px;
  }

  /* so that the profile picture doesn't start behind the nav  */
  #profile-picture {
    margin-top: 60px;
  }

  /* project cards are now stacked underneath and don't need a consistent height  */
  .project {
    min-height: inherit;
  }

  /* reduce project image and footer margins */
  .project-cover {
    margin-bottom: 0px;
  }

  .project-image {
    margin-top: 40px;
  }

  #heading-emoji {
    font-size: 32px;
  }

  #footer {
    margin-top: 0px;
  }
}