/* ==========================================================================
   Component: Error page styling
   File: 30-component.error.css
   ========================================================================== */

html,
body,
#pageContent {
  height: 100%;
}

[data-app-root] {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.error-page {
  flex: 1 0 auto;
  display: flex;
}

.error-page__inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-page__title {
  margin: 0 0 var(--space-5);
  line-height: 1.1;
  color: var(--text-strong);
  font-weight: 700;
}

.error-page__lead {
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
  color: var(--text-muted);
}

.error-page__support {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.error-page__link {
  font-weight: 500;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* > 320px / 20rem */
@media only screen and (min-width: 20rem) {
}

/* > 480px / 30rem */
@media only screen and (min-width: 30rem) {
}

/* > 640px / 40rem */
@media only screen and (min-width: 40rem) {
}

/* > 768px / 48rem */
@media only screen and (min-width: 48rem) {
  .error-page__content {
    text-align: center;
  }
  .error-page__title {
    margin-bottom: var(--space-6);
  }

  .error-page__lead {
    margin-bottom: var(--space-2);
  }
}

/* > 1024px / 64rem */
@media only screen and (min-width: 64rem) {
}

/* > 1280px / 80rem */
@media only screen and (min-width: 80rem) {
  .error-page__title {
    font-size: 3rem;
  }

  .error-page__lead {
    font-size: var(--text-xl);
  }

  .error-page__support {
    font-size: var(--text-base);
  }
}

/* > 1536px / 96rem */
@media only screen and (min-width: 96rem) {
  .error-page__title {
    font-size: 3.25rem;
  }
}