/* shared-bg.css — use on ALL pages */

:root{
  --bg0:#05070b;
  --bg1:#061118;
  --bg2:#0a2c2a;
  --glow1: rgba(34, 197, 94, .18);   /* sea/green glow */
  --glow2: rgba(20, 184, 166, .14);  /* teal glow */
  --glow3: rgba(0, 0, 0, .0);
}

/* Make sure the background is the viewport, not a container */
html, body {
  height: 100%;
  margin: 0;
}

body{
  min-height: 100vh;
  background-color: var(--bg0);

  /* IMPORTANT: no repeating + fixed to viewport */
  background-image:
    radial-gradient(900px 700px at 18% 12%, var(--glow2), transparent 60%),
    radial-gradient(900px 700px at 82% 28%, var(--glow1), transparent 58%),
    radial-gradient(1000px 800px at 50% 100%, rgba(16, 185, 129, .10), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 45%, var(--bg2));

  background-repeat: no-repeat;
  background-attachment: fixed;   /* key to stop “looping” */
  background-size: cover;
  background-position: center;
}

/* Optional: subtle vignette so it feels “deep” */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1200px 900px at 50% 0%, rgba(0,0,0,.00), rgba(0,0,0,.55));
}