* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
    font-family: "League Spartan", sans-serif;
    color: #fff;
    background: transparent;
}

html {
  background:
    radial-gradient(200% 155% at 50% 112%, rgba(243,198,35,.42) 0%, rgba(243,198,35,.16) 42%, rgba(243,198,35,0) 72%),
    radial-gradient(155% 110% at 50% 110%, rgba(243,198,35,.28) 0%, rgba(243,198,35,.10) 40%, rgba(243,198,35,0) 68%),
    radial-gradient(130% 92%  at 50% 118%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 58%),
    #021526;
  background-attachment: fixed; /* helps under collapsing bars */
}

main, .brand { position: relative; z-index: 1; }

.brand {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 35px);
  bottom: auto;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .5px;
}

main {
    min-height: 100lvh;
    display: grid;
    place-items: center;
    padding: 2rem;
}

.info{ text-align:center; }
.info h1{ font-size: clamp(1.3rem, 2.1vw + .55rem, 2.1rem); }
.info p { color: #eee; }

.divider {
    width: min(80vw, 520px);
    height: 1px;
    margin: 1rem auto 1.25rem;
    background: linear-gradient(to right, transparent, #f3c623, transparent);
}

.links {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 35px);
  display: flex;
  gap: 2.5rem;
  font-size: 18px;
  z-index: 2;
}

.links a {
  color: #fff;
  text-decoration: none;
}

.links a:hover,
.links a:focus{ opacity: 1; text-decoration: underline; }

@media (min-resolution: 2dppx){
    .divider{ transform: scaleY(.5); transform-origin: center; }
}