:root {
  color-scheme: dark;
  --background: #02080b;
  --foreground: #d3e5ef;
  --accent: #1d8b89;
  --accent-alt: #07556a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family:
    Rajdhani, "Helvetica Neue", Avenir, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(41, 137, 140, 0.38), transparent 34rem),
    radial-gradient(ellipse at 76% 78%, rgba(5, 61, 86, 0.72), transparent 42rem),
    radial-gradient(ellipse at 48% 120%, rgba(1, 25, 37, 0.94), transparent 38rem),
    conic-gradient(from 205deg at 50% 44%, #03161c, #062d38, #061016, #02080b, #03161c),
    var(--background);
  background-attachment: fixed;
  color: var(--foreground);
}

.landing {
  --title-size: clamp(4rem, 15vw, 12rem);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.landing::before,
.landing::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.landing::before {
  width: min(135vw, 82rem);
  height: min(92vw, 48rem);
  background:
    radial-gradient(ellipse at 22% 56%, rgba(72, 149, 144, 0.16), transparent 28rem),
    radial-gradient(ellipse at 64% 42%, rgba(7, 63, 84, 0.28), transparent 31rem),
    linear-gradient(104deg, transparent 12%, rgba(210, 236, 232, 0.045) 43%, transparent 72%);
  filter: blur(0.35rem);
  opacity: 0.82;
  transform: translate(-4%, 7%) rotate(-7deg);
}

.landing::after {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(147, 214, 205, 0.055) 45%, transparent 52%),
    linear-gradient(68deg, transparent 0 50%, rgba(147, 214, 205, 0.04) 52%, transparent 58%);
  opacity: 0.8;
}

h1 {
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: var(--title-size);
  line-height: 0.92;
  letter-spacing: 0.5em;
  font-weight: 300;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1.75rem 4rem rgba(0, 0, 0, 0.55);
  padding-left: 0.5em;
}

.mark {
  position: absolute;
  width: min(92vw, calc(var(--title-size) * 5.1));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 242, 241, 0.38), transparent);
  transform: translateY(0);
}

@media (max-width: 34rem) {
  .landing::before {
    width: 150vw;
    height: 96vw;
  }

  .mark {
    transform: translateY(4.8rem);
  }
}