/* tule fog games — shared styles */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:linear-gradient(180deg,#04050b 0%,#0b0d20 100%);
  background-attachment:fixed;
  color:rgba(214,226,252,.85);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}
a{color:#9cc8ff;text-decoration:none;}
a:hover{text-decoration:underline;}
main{max-width:680px;margin:0 auto;padding:0 24px;}

/* star specks — CSS gradients only */
.stars{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(214,226,252,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%,  rgba(214,226,252,.4)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 31%, rgba(255,222,156,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 58%, rgba(214,226,252,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 46%, rgba(214,226,252,.5)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(214,226,252,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 74%, rgba(255,222,156,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 92%, rgba(214,226,252,.4)  50%, transparent 51%),
    radial-gradient(1px 1px at 95% 88%, rgba(214,226,252,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 40%, rgba(214,226,252,.25) 50%, transparent 51%);
}

/* headings */
h1,h2{color:#ffde9c;font-weight:300;letter-spacing:.18em;}
h2{font-size:1.05em;letter-spacing:.22em;margin-top:2.4em;}

/* footer */
footer{
  margin:96px auto 0;padding:32px 24px 48px;max-width:680px;
  text-align:center;font-size:.85em;color:rgba(214,226,252,.45);
  border-top:1px solid rgba(214,226,252,.08);
}
footer nav{margin-top:10px;}
footer nav a{margin:0 10px;color:rgba(156,200,255,.75);}