* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #050505;
}

body {
  display: grid;
  place-items: center;
  overflow-x: hidden;
}

.landing {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 80% 50%, rgba(0, 91, 255, 0.12), transparent 32rem),
    radial-gradient(circle at 26% 60%, rgba(255, 0, 120, 0.09), transparent 28rem),
    #050505;
}

.landing-image {
  display: block;
  width: 100%;
  max-width: 1920px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

@media (min-aspect-ratio: 16 / 9) {
  .landing-image {
    width: auto;
    height: 100vh;
  }
}

@media (max-width: 800px) {
  body {
    place-items: start center;
  }

  .landing {
    min-height: 100svh;
    align-items: start;
  }

  .landing-image {
    width: 160vw;
    max-width: none;
    transform: translateX(-28vw);
  }
}

/* Accessible text for search engines and screen readers without visually changing the design. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}