/* Body Styles */
body {
  background-color: var(--color-background);
  font-size: 18px;
  color: var(--color-text);
  font-family: var(--font-primary);
  line-height: 1.6;

  @media (max-width: var(--breakpoint-mobile)) {
    background: var(--color-background);
  }
}

/* Global Elements */
strong {
  font-weight: bold;
}

small {
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.75;
}

a {
  color: var(--color-primary);
  text-decoration: none;

  &:hover {
    color: var(--color-primary-hover);
  }
}

p,
li,
h1,
h2,
h3 {
  text-shadow: 0 0 2px #e8f3ee, 0 0 1em #e9f3ef;
}

/* Error Section */
.error {
  text-align: center;

  p {
    margin-bottom: 1em;
  }

  .illustration {
    text-align: center;

    img {
      max-width: 60%;
    }
  }

  @media (max-width: var(--breakpoint-mobile)) {
    .end {
      display: none;
    }

    .illustration img {
      max-width: 80%;
    }
  }
}