html,
body {
  margin: 0;
  background: #f1f3f5;
}

main {
  /* Equal rows above and below keep the logo in the middle of the screen; the badge sits in the bottom row. */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.logo {
  grid-row: 2;
  /* Same size as the animated logo on the first holding page; the animation is 510 × 90. */
  width: clamp(220px, 60vw, 640px);
  aspect-ratio: 510 / 90;
  margin: 0;
}

.logo svg {
  display: block;
}

.soon {
  grid-row: 3;
  align-self: end;
  position: relative;
  width: clamp(120px, 30vw, 196px);
  margin: 2rem 0 max(2rem, 8.5vh);
}

/* The crosshair overlaps the badge's bottom-right corner. */
.soon-crosshair {
  position: absolute;
  width: 22%;
  right: -9%;
  bottom: -13%;
}