:root{
  --ink:#f1f1f1;
  --bg:#0a0a0a;
  --accent:#ffd400; /* duck yellow accent */
  --pill:#111;
  --pillBorder:#444;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden; /* keep background contained */
  font-family:"VT323", monospace;
  image-rendering: pixelated;            /* crisp scaling */
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Background typing wall (4 columns) */
#type-bg{
  position:fixed;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  padding:24px;
  pointer-events:none;
  z-index:0;
}

#type-bg .col{
  font-family:"Press Start 2P", monospace;
  font-size:14px;
  line-height:1.6;
  color:#ffffff12;        /* faint */
  white-space:pre;        /* we insert \n per line */
  overflow:hidden;
}

/* Subtle upward drift to give motion even when idle */
@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
#type-bg { animation: drift 4s ease-in-out infinite alternate; }

/* Foreground hero */
.hero{
  position:relative;
  height:100dvh;
  display:grid;
  place-items:center;
  gap:24px;
  text-align:center;
  padding:24px;
  z-index:1;
}

#duck{
  width:min(78vmin, 720px);
  max-width:92vw;
  aspect-ratio:1/1;
  object-fit:contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 24px #ffd40033);
}

.pills{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.pill{
  font-family:"Press Start 2P", monospace;
  font-size:12px;
  letter-spacing:0.5px;
  background:var(--pill);
  color:var(--ink);
  border:3px solid var(--pillBorder);
  padding:14px 18px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  box-shadow: inset 0 -3px 0 #000, 0 6px 0 #0006;
  transition: transform .05s;
}
.pill:hover{ border-color:var(--accent); }
.pill:active{ transform: translateY(2px); box-shadow: inset 0 0 0 #000, 0 2px 0 #0006; }

#join{ background: linear-gradient(#151515,#0e0e0e); }
#ca .copy{ opacity:.6; margin-left:8px; }

/* Tiny watermark vibe (optional) */
.hero::after{
  content:"thicc ahh duck";
  position:fixed; bottom:10px; left:12px;
  font-family:"Press Start 2P";
  font-size:10px; opacity:.25; color:var(--accent);
}