html,
body {
  margin: 0;
  padding: 0;
  min-height: 100svh;
}

body {
  position: relative;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.credits {
  position: relative;
  margin-top: -2rem;
  padding: 0 1rem;
  font-size: 0.625rem;
  text-align: right;

  .headline {
    display: inline;
    margin-right: -0.25em;
    font-size: inherit;
    text-transform: uppercase;
  }
  
  .subline {
    display: inline;
    font-size: inherit;
    text-transform: uppercase;

    &::before {
      /* escaped for those folks still using vi ;) */
      content: "\00a0\2012\00a0";
    }
  }

  @media (orientation: portrait) {
    text-align: center;
  }
}

.techstack {
  margin: 1rem 0;
  padding: .5rem;
  font-size: 0.625rem;
  text-align: left;
  text-transform: uppercase;

  .headline {
    font-weight: normal;
  }

  & ul {
    list-style: none;
    margin: 0.5em 0;
    padding: 0;

    & ul {
      & li {
        display: inline;
  
        + li::before {
          content: ' • ';
        }
      }
    }

    & strong {
      font-weight: 600;
    }
  }

  @media (orientation: landscape) {
    & ul ul {
      display: inline;
    }
  }

  @media (orientation: portrait) {
    margin: 1rem auto 5rem;
    max-width: 50%;
    text-align: center;

    & strong {
      display: block;
      margin-top: .5rem;
    }
  }
}

footer {
  margin-top: -2rem;
  box-sizing: border-box;
  width: 100%;
  font-size: 0.5rem;
  text-transform: uppercase;
  text-align: right;
  padding: 0.5rem;

  & p {
    margin: 0;
  }
}

@layer parallax {
  .parallax {
    animation: parallax linear;
    animation-timeline: scroll();

    &.z-06 {
      --speed: -8;
    }
    &.z-07 {
      --speed: -6;
    }

    &.z-08 {
      --speed: -4;
    }

    &.z-09 {
      --speed: -2;
    }

    &.z-10 {
      --speed: 0;
    }

    &.z-11 {
      --speed: 2;
    }

    &.z-12 {
      --speed: 4;
    }
  }
}

@keyframes parallax {
  to {
    transform: translateY(calc(var(--speed, 0) * -10%));
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}