rf-web/_sass/layouts/404.scss

.error-404 {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  h1,
  p,
  a,
  strong {
    color: var(--colour-black-graphite);

    @include darkMode {
      background-color: var(--colour-white);
      padding: var(--size-base);
    }
  }

  .fourohfour {
    display: flex;
    flex-direction: row;

    h1 {
      animation: grain 1s steps(10) infinite;

      &:first-of-type {
        animation-duration: 2s;
      }
      &:last-of-type {
        animation-duration: 3s;
      }
    }
  }

  a {
    transition: transform 5s ease-in-out;
  }
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}