apps/barista-design-system/src/pages/error-page/error-page.scss
@import '../../styles/global/variables.scss';

:host {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.ba-error-page-content-wrapper {
  max-width: $max-text-width;
  text-align: center;
}

.ba-error-illustration {
  max-width: 350px;
}

@media (min-width: $screen-md) {
  .ba-error-page-content-wrapper {
    display: flex;
    text-align: left;
    max-width: 100%;

    svg {
      width: 100%;
      margin-right: 2rem;
    }

    .ba-error-page-text-wrapper {
      margin: auto 0;

      h1 {
        margin-top: 0;
      }
    }
  }
}

.ba-error-illustration-coffeePotLid {
  animation: shake 5s;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  0.7% {
    transform: translate(-15px, 20px) rotate(-3deg);
  }
  1.4% {
    transform: translate(-15px, 30px) rotate(-6deg);
  }
  2.1% {
    transform: translate(-15px, 20px) rotate(-3deg);
  }
  2.8% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  3.5% {
    transform: translate(15px, -20px) rotate(3deg);
  }
  4.2% {
    transform: translate(20px, -40px) rotate(6deg);
  }
  4.9% {
    transform: translate(15px, -20px) rotate(3deg);
  }
  5.6% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  6.3% {
    transform: translate(-15px, 20px) rotate(-3deg);
  }
  7.0% {
    transform: translate(-15px, 30px) rotate(-6deg);
  }
  7.7% {
    transform: translate(-15px, 20px) rotate(-3deg);
  }
  8.4% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  9.1% {
    transform: translate(15px, -20px) rotate(3deg);
  }
  9.6% {
    transform: translate(20px, -40px) rotate(6deg);
  }
  10% {
    transform: translate(15px, -20px) rotate(3deg);
  }
  10.1% {
    transform: translate(0, 0) rotate(0deg);
  }
}
