_error.scss

.app-error {
  background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '800') 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: mc('grey', '50');
  font-family: Roboto, Arial, sans-serif;

  img {
    width: 250px;
    filter: grayscale(50%) brightness(120%);
    animation: errorlogo 5s linear infinite;
    margin-bottom: 3rem;

    @include until($tablet) {
      width: 200px;
    }
  }

  @keyframes errorlogo {
    0% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
    }
    10% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(100%);
    }
    15% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(0%);
    }
    30% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
    }
    32% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(2700deg) invert(100%);
    }
    34% {
      filter: blur(0) grayscale(100%) brightness(50%) hue-rotate(110deg);
    }
    50% {
      filter: blur(0) grayscale(100%) brightness(200%) hue-rotate(110deg) sepia(0%);
    }
    55% {
      filter: blur(0) grayscale(100%) brightness(100%) hue-rotate(110deg) sepia(100%);
    }
    60% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) sepia(0%);
    }
    90% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
    }
    95% {
      filter: blur(5px) grayscale(50%) brightness(200%) hue-rotate(720deg);
    }
    100% {
      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(100%);
    }
  }

  > strong {
    font-size: 1.5rem;
  }

  > span {
    margin-top: 1rem;
  }

  > pre {
    margin-top: 2rem;

    code {
      color: mc('grey', '500');
      font-size: .8rem;
    }
  }
}