.siteNav {
  display: flex;
  align-items: center;
  padding: 0 3%;
  width: 100%;
  height: 60px;
  margin: 16px 0;
}

.navSprite {
  height: 100%;
}

a.button {
  box-sizing: content-box;
  padding: 0.75lh 2ch 0.5lh 4ch;
  margin-left: -4ch;
  font-size: 1em;
  color: inherit;

  &:visited {
    color: inherit;
  }

  @media screen and (min-width: 768px) {
    padding-right: 2ch;
    margin-left: 0;
    margin-right: -2ch;
  }

  @media (pointer: fine) {
    text-decoration: none;

    &:hover {
      background-image: url("button-border.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
}

.nameTitle {
  font-family: Rock Salt;
  white-space: nowrap;

  font-size: 15vw;
  margin-bottom: 50px;

  @media screen and (min-width: 768px) {
    font-size: 6.5rem;
    margin-bottom: 25px;
  }
}

.heroSection,
.projects {
  width: 90%;
  max-width: 1200px;
}

.heroSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 100vh;

  font-size: 3.5em;
  line-height: 1.25;

  & span,
  & small {
    display: block;
  }

  & small {
    font-size: 0.375em;
  }

  @media screen and (min-width: 768px) {
    font-size: 5em;
  }
}

.projects {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 96px;
  margin-bottom: 96px;

  @media screen and (min-width: 768px) {
    grid-template-columns: 5fr 4fr;
    column-gap: min(5vw, calc(1200px * 0.05));
  }
}

.projectSection {
  display: flex;
  flex-direction: column;

  @media screen and (min-width: 768px) {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / span 2;
    min-height: 500px;
  }
}

.projectSectionDemo,
.projectSectionDetails {
  flex: 1;
}

.projectSectionDemo {
  margin-bottom: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  & object {
    width: 100%;
  }
}

.videoContainer {
  position: relative;

  & video,
  & img {
    width: 100%;
    height: 100%;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
  }

  & img {
    display: none;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  @media (prefers-reduced-motion) {
    & video {
      display: none;
    }

    & img {
      display: block;
    }
  }
}

#doka-worms-container {
  & video,
  & img {
    mask-image: url(project-screenshots/doka-worms-mask.svg);
  }

  &::after {
    background-image: url(project-screenshots/doka-worms-border.svg);
  }
}

.fellowVideos {
  position: relative;

  @media screen and (min-width: 480px) {
    width: 100%;
    height: 65vw;

    #fellow-1-container,
    #fellow-2-container {
      position: absolute;
      width: 75%;
      min-width: 225px;
    }

    #fellow-1-container {
      z-index: 1;
      top: 0;
      right: 0;
    }

    #fellow-2-container {
      bottom: 0;
      left: 0;
    }
  }

  @media screen and (min-width: 768px) {
    width: 85%;
    height: min(27.5vw, calc(1200px * 0.275));

    #fellow-1-container,
    #fellow-2-container {
      position: absolute;
      width: 65%;
    }

    #fellow-1-container {
      z-index: 1;
      top: 0;
      right: 0;
    }

    #fellow-2-container {
      bottom: 0;
      left: 0;
    }
  }
}

#fellow-1-container {
  & video,
  & img {
    mask-image: url(project-screenshots/fellow-1-mask.svg);
  }

  &::after {
    background-image: url(project-screenshots/fellow-1-border.svg);
  }
}

#fellow-2-container {
  & video,
  & img {
    mask-image: url(project-screenshots/fellow-2-mask.svg);
  }

  &::after {
    background-image: url(project-screenshots/fellow-2-border.svg);
  }
}

.projectSectionDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 24px;

  & header {
    & h2 {
      line-height: 1;
    }
    & p {
      font-size: 1.25em;
    }
  }

  & > p,
  & a {
    font-size: 1.2em;
  }

  @media screen and (min-width: 768px) {
    text-align: right;
    align-items: flex-end;
  }
}