404.css

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');

div.expansion#_404-expansion {

  &>div.components {
    color: var(--accent-color);


    &>span {
      margin: 0;
      font-family: 'Rubik Mono One', monospace;
      transition-property: width, margin;
      font-size: clamp(1rem, 10vw, 20vh);

      &.number {
        width: 1ch;
      }

      &.word {
        width: 0ch;
      }

      &#_4a {
        order: 0;
      }

      &#page {
        order: 1;
      }

      &#_0 {
        order: 2;
      }

      &#not {
        order: 3;
      }

      &#_4b {
        order: 4;
      }

      &#found {
        order: 5;
      }

    }
  }

  &>a.link#home {
    font-family: 'Rubik', sans-serif;
    font-style: italic;
    font-size: clamp(1rem, 5vw, 20vh);
  }

  &:hover,
  &:has(a.link#home:focus) {
    div.components {
      span.number {
        width: 0;
      }

      span.word {
        margin: 0 0.15ch;

        &#page {
          width: 4ch;
        }

        &#not {
          width: 3ch;
        }

        &#found {
          width: 5ch;
        }
      }
    }
  }
}