/* Fullscreen 404 — exploding sun */
:root{
  /* Palette copied from site `codegalaxy.css` to keep 404 in the same colors */
  --major: #001F3F;
  --secondary: #F5F5DC;
  --accent: #FFD700;
  --accent-dark: #C0A000;
  --text: #FFFFFF;
  --bg: #0D133D;
  --fg: var(--text);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: radial-gradient(ellipse at center,#021028 0%, #000814 60%, var(--bg) 100%);
  color:var(--fg);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  overflow:hidden;
}
canvas{display:block;width:100vw;height:100vh}
.overlay{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none
}
.overlay h1{font-size:110px;letter-spacing:6px;margin-bottom:6px;color:var(--accent);text-shadow:0 6px 30px rgba(255,200,0,0.12)}
.overlay p{font-size:20px;opacity:0.95;margin-bottom:12px}
.btn{pointer-events:auto;display:inline-block;padding:10px 18px;border-radius:8px;background:var(--accent-gradient, linear-gradient(90deg,#FFD700,#C0A000));color:var(--major);text-decoration:none;font-weight:700;box-shadow:0 6px 22px rgba(255,215,0,0.12)}
.hint{font-size:12px;opacity:0.6;margin-top:10px}

/* Make text readable on small screens */
@media (max-width:480px){
  .overlay h1{font-size:68px}
  .overlay p{font-size:16px}
}

/* Optional: subtle starfield in CSS (covered by canvas but helps during slow loads) */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06) 0 1px, transparent 1px),radial-gradient(circle at 60% 80%, rgba(255,255,255,0.04) 0 1px, transparent 1px);background-size:120px 120px,200px 200px;mix-blend-mode:screen;opacity:0.6
}