:root {
  --bg: #04140b;
  --fg: #f5f7ff;
  --green-1: #065f46;
  --green-2: #10b981;
  --green-3: #6ee7b7;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background:
    radial-gradient(900px circle at 50% 35%, rgba(110, 231, 183, 0.35), rgba(16, 185, 129, 0) 55%),
    radial-gradient(1200px circle at 50% 45%, rgba(16, 185, 129, 0.45), rgba(6, 95, 70, 0) 60%),
    linear-gradient(180deg, #04140b 0%, var(--bg) 45%, #020a05 100%);
}

.center {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.word {
  margin: 0;
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-rendering: geometricPrecision;

  background: linear-gradient(180deg, #ffffff 0%, var(--green-3) 40%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}