main {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  overflow-x: hidden;

  .bottom-ellipse {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .left-ellipse {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }

  img {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  main {
    img {
      max-width: 200px;
    }

    .text-404 {
      z-index: 100;
    
      h1 {
        font-size: 1.4rem;
      }

      p {
        font-size: 1.1rem;
        padding: 0 1rem;
      }
    }

    .bottom-ellipse {
      max-width: 120px;
    }

    .left-ellipse {
      max-width: 120px;
    }
  }
}