body {
    font-family: 'Anybody';
}

/* header and navbar */
    .header {
        font-family: 'Anybody Expanded';
        font-size: 5vw; /* Scales with the viewport width */
        text-align: center;
        padding-right: 1vw;
        padding-bottom: 1vw;
        text-shadow: 1vw 1vw #D9D9D9, 2vw 2vw #FF4122;
    }

    h2 {
        font-size: 2.5vw;
        padding-top: 1vw;
        padding-left: 1vw;
        padding-right: 1vw;
    }

    .about-h {
        color: white;
    }

    .characters-h {
        color: #D9D9D9;
    }

    .body-copy-h {
        color: black;
    }

    .display-h {
        font-family: "Anybody Expanded";
        color: black;
    }

    .experiments-h {
        paint-order: stroke fill;
        -webkit-text-stroke: 0.5vw black;
        color: #FF4122;
    }

/* navbar */
    .navbar {
        background-color: #FF4122;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3vw;
        position: relative;
    }

    .navbar a {
        color: white;
        text-decoration: none;
        padding: 0 3vw;
        font-size: 2vw;
    }

/* about section */
    .about {
        font-size: 2vw;
        column-count: 3;
        padding-left: 1vw;
        padding-right: 1vw;
    }

/* characters section */
    .characters span {
      padding-left: 1vw;
      padding-right: 1vw;
      font-size: 2.5vw;
      background-color: #D9D9D9;
      padding: 0.2em;
      display: inline-block;
      transition: background-color 0.05s, color 0.05s;
    }

    .characters span:hover {
      background-color: black;
      color: white;
    }

    .characters .hover-red:hover {
      color: red;
    }

/* body copy section */
    .body-col {
        columns: 2;
        break-inside: avoid-column;
    }

    .body {
        position: relative;
        break-inside: avoid-column;
        font-size: 2vw;
        font-family: 'Anybody';
        width: 30vw;
        background-color: #FF4122;
        color: white;
        padding-left: 2vw;
        padding-top: 5vw;
        padding-bottom: 8vw;
        padding-right: 15vw;
        right: 10vw;
        align-items: right;
    }

    .body-hyperextended {
        break-inside: avoid-column;
        font-size: 2vw;
        font-family: 'Anybody ExtraExpanded';
        line-height: 5vw;
        background-color: #FF4122;
        color: white;
        padding-right: 5vw;
        padding-top: 5vw;
        width: 90vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .body-hypercondensed {
        break-inside: avoid-column;
        font-size: 2vw;
        font-family: 'Anybody ExtraCondensed';
        line-height: 3vw;
        width: 30vw;
        padding-left: 5vw;
        padding-top: 5vw;
        padding-bottom: 5vw;
        background-color: #FF4122;
        color: white;
    }

    .body-box-1 {
        background-color: black;
        width: 45vw;
        height: 25vw;
        z-index: -1;
        position: absolute;
        top: 102vw;
        left: 30vw;
    }

/* display section */
    .display-1 {
        font-family: "Anybody ExtraExpanded";
        color: #D9D9D9;
        background-color:#FF4122;
        height: 8%;
        font-size: 7.5vw;
        line-height: 3vw;
        position: absolute;
        top: 220vw;
        left: 5vw;
        padding-top: 1vw;
    }

    .display-2 {
        font-weight: 900;
        rotate: -30deg;
        font-family: "Anybody";
        color: #D9D9D9;
        background-color: #000000;
        font-size: 7.5vw;
        line-height: 3vw;
        position: absolute;
        top: 225vw;
        left: 5vw;
    }

    .display-3 {
        rotate: 45deg;
        font-family: "Anybody ExtraCondensed";
        color: #FFFFFF;
        background-color: #000000;
        font-size: 2.5vw;
        line-height: 3vw;
        position: absolute;
        top: 220vw;
        left: 75vw;
        z-index: 10;
    }

    .display-4 {
        rotate: 90deg;
        font-family: "Anybody Expanded";
        color: #000000;
        background-color:#D9D9D9;
        height: 10%;
        font-size: 5vw;
        line-height: 3vw;
        position: absolute;
        top: 240vw;
        left: 55vw;
        letter-spacing: 2vw;
        
    }

    .display-5 {
        padding-left: 20vw;
        font-family: "Anybody ExtraExpanded";
        overflow: hidden;
        color: #FF4122;
        font-size: 15vw;
        top: 226vw;
        padding-top: 10vw;
        opacity: 0.5;
        padding-bottom: 5vw;
    }

    .display-6 {
        font-family: "Anybody ExtraExpanded";
        color: #FF4122;
        font-size: 15vw;
        position: absolute;
        top: 236vw;
        left: -78vw;
        opacity: 0.5;
    }

/* experiments section */
/* experiment one */
    .exp-1 {
      background: #FFFFFF;
      width: 100vw;
      height: 100vh;
      font-weight: bold;
      font-size: 5vw;
      position: relative;
      overflow: hidden;
    }

    .exp-1 > div {
      animation: exp-1-animation linear 10s infinite;
      transform-origin: center center;
      opacity: 0;
      width: 250px;
      height: 200px;
      position: absolute;
      backface-visibility: hidden;
    }

    .exp-1 > div:nth-child(1) {
      font-family: "Anybody ExtraExpanded";
      color: #FF4122;
      left: 30vw;
      top: 30vh;
      animation-delay: 0s;
    }

    .exp-1 > div:nth-child(2) {
      font-family: "Anybody ExtraCondensed";
      color: #D9D9D9;
      left: 70vw;
      top: 30vh;
      animation-delay: 4s;
    }

    .exp-1 > div:nth-child(3) {
      font-family: "Anybody";
      color: #000000;
      left: 50vw;
      top: 50vh;
      animation-delay: 8s;
    }

    .exp-1 > div:nth-child(4) {
      font-family: "Anybody Expanded";
      color: #FF4122;
      left: 30vw;
      top: 70vh;
      animation-delay: 6s;
    }

    .exp-1 > div:nth-child(5) {
      font-family: "Anybody Condensed";
      color: #D9D9D9;
      left: 70vw;
      top: 70vh;
      animation-delay: 2s;
    }

    @keyframes exp-1-animation {
      0% {
          transform: scale3d(0,0,1) rotate(0.02deg);
          opacity: 0;
          filter: blur(10px);
      }
      25% {
          transform: scale3d(1,1,1) rotate(0.02deg);
          opacity: 1;
          filter: blur(0px);
      }
      40% {
          opacity: 1;
          filter: blur(0px);
      }
      80% {
          opacity: 0;
      }
      100% {
          transform: scale3d(4,4,1) rotate(0.02deg);
          filter: blur(10px);
      }
    }

/* experiment two */
    .exp-2-keyboard {
    text-align: center;
    }
    .exp-2-key {
      font-size: 15vw;
      display: inline-block;
      letter-spacing: -1vw;
      transition: transform 0.2s;
    }

    @keyframes exp-2-pressDown1 {
      30%, 40%, 100% {
          transform: translateY(0);
      }
      35% {
          transform: translateY(10px);
      }
    }

    @keyframes exp-2-pressDown2 {
      70%, 80%, 100% {
          transform: translateY(0);
      }
      75% {
          transform: translateY(10px);
      }
    }

    @keyframes exp-2-pressDown3 {
      30%, 40%, 100% {
          transform: translateY(0);
      }
      35% {
          transform: translateY(10px);
      }
    }

    @keyframes exp-2-pressDown4 {
      40%, 50%, 100% {
          transform: translateY(0);
      }
      45% {
          transform: translateY(10px);
      }
    }

    @keyframes exp-2-pressDown5 {
      20%, 30%, 100% {
          transform: translateY(0);
      }
      25% {
          transform: translateY(10px);
      }
    }

    @keyframes exp-2-pressDown6 {
      60%, 70%, 100% {
          transform: translateY(0);
      }
      65% {
          transform: translateY(10px);
      }
    }

    @keyframes exp-2-pressDown7 {
      10%, 20%, 100% {
          transform: translateY(0);
      }
      15% {
          transform: translateY(10px);
      }
    }

    @keyframes exp-2-pressDown8 {
      35%, 45%, 100% {
          transform: translateY(0);
      }
      40% {
          transform: translateY(10px);
      }
    }

    .exp-2-key:nth-child(1) {
      animation: exp-2-pressDown1 2s infinite;
    }

    .exp-2-key:nth-child(2) {
      animation: exp-2-pressDown2 3s infinite;
    }

    .exp-2-key:nth-child(3) {
      animation: exp-2-pressDown3 4s infinite;
    }

    .exp-2-key:nth-child(4) {
      animation: exp-2-pressDown4 2.5s infinite;
    }

    .exp-2-key:nth-child(5) {
      animation: exp-2-pressDown5 2.5s infinite;
    }

    .exp-2-key:nth-child(6) {
      animation: exp-2-pressDown6 3.5s infinite;
    }

    .exp-2-key:nth-child(7) {
      animation: exp-2-pressDown7 2.2s infinite;
    }

    .exp-2-key:nth-child(8) {
      animation: exp-2-pressDown8 3.2s infinite;
    }