/* TieDyeSasquatch shared theme - edit colors/fonts here to restyle the whole site */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap");
:root{
  --bg:#110e1f; --card:#1c1833; --ink:#f6f3ff; --muted:#b9b0d9;
  --red:#ff3b6b; --orange:#ff9f1c; --yellow:#ffe14d; --green:#3ddc84; --blue:#2ec4ff; --purple:#a66bff;
  --rainbow:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple),var(--red));
  --font:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:5rem}
body{margin:0;background:radial-gradient(circle at 15% 0%,#2a1747 0,transparent 45%),radial-gradient(circle at 90% 30%,#0f2a4a 0,transparent 40%),var(--bg);
  color:var(--ink);font-family:var(--font);font-size:1.1rem;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:60rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* animated rainbow bubble lettering */
.bubble{font-weight:700;letter-spacing:.02em;background:var(--rainbow);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #0a0814;paint-order:stroke fill;
  filter:drop-shadow(0 3px 0 #0a0814);animation:tds-flow 8s linear infinite}
@keyframes tds-flow{to{background-position:300% 0}}

.tds-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding:.9rem 1.25rem;
  border-bottom:3px solid transparent;border-image:var(--rainbow) 1;background:rgba(10,8,20,.7);backdrop-filter:blur(6px)}
.tds-back{font-size:1.5rem;text-decoration:none;line-height:1.1}
.tds-nav,.tds-foot-nav{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:0;padding:0;list-style:none}
.tds-nav a,.tds-foot-nav a{display:inline-block;padding:.3rem .8rem;border-radius:2rem;color:var(--ink);text-decoration:none;font-weight:600;border:2px solid #3b3463}
.tds-nav a:hover,.tds-foot-nav a:hover{border-color:var(--yellow);color:var(--yellow)}
.tds-nav a[aria-current="page"]{background:var(--card);border-color:var(--purple)}
.tds-footer{padding:1.5rem 1.25rem;text-align:center;color:var(--muted);border-top:3px solid transparent;border-image:var(--rainbow) 1;font-size:.95rem}
.tds-footer .tds-foot-nav{justify-content:center;margin-bottom:.75rem}

/* section cards: each gets its own hue via --c */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem;margin:0;padding:0;list-style:none}
.card{display:block;height:100%;padding:1.25rem 1.3rem;background:var(--card);border-radius:1.4rem;border:3px solid var(--c,var(--purple));
  color:var(--ink);text-decoration:none;box-shadow:6px 6px 0 var(--c,var(--purple))}
a.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--c,var(--purple))}
.card h2,.card h3{margin:.1rem 0 .3rem;font-size:1.45rem;color:var(--c,var(--ink))}
.card p{margin:0;color:var(--muted);font-size:1rem}
.card .ico{font-size:2rem;line-height:1}
.btn{display:inline-block;margin-top:.8rem;padding:.45rem 1.1rem;border-radius:2rem;background:var(--c,var(--purple));color:#120d22;font-weight:700;text-decoration:none}
.note{margin-top:2rem;padding:1rem 1.2rem;border-radius:1rem;background:#1c1833;color:var(--muted);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}a.card:hover{transform:none}}