@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
  html,
  body {
    font-size: 16px;
  }
  :root {
    --bg-color: #fffffa;
    --space1: 18px;
    --spacetop: 10px;
    --font-big: 20px;
    --font-medium: 16px;
  }
  #about-people {
    display: block;
  }
  .person {
    padding: var(--space1) 0;
    border-top: 2px solid;
  }

  .header-container{
      background: #fff;
  }
  #intro-page,
  #projects,
  #project-list,
  #about-page,
  #project-page{
      padding-left: 20px;
      padding-right: 20px;
      border-top: none;
  }

  #intro-container,
  #intro-bg-container,
  #page-container {
    padding: 0px;
    padding-top: 120px;
    padding-bottom: 0px;
  }
  #page-container{
      position: fixed;
  }
  .header {
    grid-template-columns: 0px auto;
  }
  #page-mid {
    padding: var(--space1) 0;
  }
  #page-mid .image {
    padding: 0px;
  }
  #project-links {
    display: block;
  }

  .link:nth-child(even) {
    border-right: none;
  }
  #project-back {
    z-index: 99;
  }
  #project-back img {
    max-width: 40px;
  }
  #project-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 30px;
  }
}