@import url('./common.css');

.error404-container {
  background-color: var(--background-color);
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin: auto;
  text-align: center;
  gap: 1rem;

  .styled-container {
    max-width: fit-content;
    margin: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 25rem;
    padding: 2rem 4rem;
    h1 {
      font-size: xx-large;
    }

    p {
      font-weight: bold;
    }

    p.oops {
      font-size: x-large;
    }

    img {
      border-radius: var(--page-border-radius);
      max-width: 100%;
    }
    @media (min-width: 425px) {
      img {
        max-width: 18rem;
      }
    }
  }
}