#error-404 {
}

#error-404 div {
  width: 100%;
  text-align: center;
}

#error-404 .number {
  background: #fff;
  position: relative;
  font-weight: 900;
  font-size: 30vmin;
  font-family: "Consolas";
  letter-spacing: 5vmin;
  text-shadow: 2px -1px 0 #000, 4px -2px 0 hsl(0deg, 0%, 2%),
    6px -3px 0 hsl(0deg, 0%, 4%), 8px -4px 0 hsl(0deg, 0%, 6%),
    10px -5px 0 hsl(0deg, 0%, 8%), 12px -6px 0 hsl(0deg, 0%, 10%),
    14px -7px 0 hsl(0deg, 0%, 12%), 16px -8px 0 hsl(0deg, 0%, 14%);
}

#error-404 .number::before {
  content: "";
  background-color: #681e77;
  background-image: radial-gradient(
      closest-side at 50% 50%,
      #fe5e00 100%,
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(closest-side at 50% 50%, #fe5e00 100%, rgba(0, 0, 0, 0));
  background-repeat: repeat-x;
  background-size: 40vmin 40vmin;
  background-position: -100vmin 20vmin, 100vmin -25vmin;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  animation: moving 10s linear infinite both;
}

@keyframes moving {
  to {
    background-position: 100vmin 20vmin, -100vmin -25vmin;
  }
}

#error-404 .text {
  font-family: "Courgette";
  font-weight: 400;
  font-size: 5vmin;
}

#error-404 .text span {
  font-size: 10vmin;
}
.btn:hover {
  background-color: #681e77;
}