:root{ --bg:#ffffff; --text:#111827; --muted:#6b7280; --accent:#00ff88; /* green accent for light */ /* dark neon palette */ --dark-bg:#0d1117; --dark-surface:#0b0f14; --dark-text:#e6edf3; --neon-cyan:#00ffff; --neon-pink:#ff00ff; --neon-green:#00ff88; } /* base */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .container{max-width:1100px;margin:0 auto;padding:24px} .site-header{padding:32px 0} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px} .title-block{max-width:620px} .site-title{margin:0;font-family:'JetBrains Mono', monospace;font-size:28px} .site-title .mono{color:var(--text)} .site-sub{margin:6px 0 12px;color:var(--muted)} .social-row{display:flex;gap:12px} .social-link{color:inherit;text-decoration:none;font-weight:600} .main-nav a{margin-left:14px;text-decoration:none;color:inherit;font-weight:600} .header-actions{display:flex;align-items:center;gap:16px} .btn{background:transparent;border:1px solid rgba(0,0,0,0.08);padding:10px 14px;border-radius:8px;cursor:pointer} .btn.hidden{display:none} /* about page */ .about-page{display:flex;justify-content:center;padding:32px} .about-card{display:flex;gap:24px;align-items:flex-start} .author-photo{width:160px;height:160px;border-radius:8px;object-fit:cover} .about-content{max-width:700px} .credly-list{list-style:disc;margin-left:18px} /* footer placeholder */ #site-footer{margin-top:48px} /* theme dark overrides applied by .dark on body */ body.dark{ background:var(--dark-bg); color:var(--dark-text); } body.dark .site-title .mono{color:var(--neon-green);text-shadow:0 0 8px rgba(0,255,255,0.15)} body.dark .social-link{color:var(--neon-green)} body.dark .btn{border-color:rgba(255,255,255,0.06)} /* small screens */ @media (max-width:767px){ .header-inner{flex-direction:column;align-items:flex-start} .main-nav{margin-top:12px} .container{padding:16px} } /* Dark‑mode tweak for the pagination “Next” button */ body.dark #next-page { color: var(--dark-text); /* bright green – high contrast on dark bg */ } /* ------------------------------------------------------------- Dark‑mode colour for the social‑media icons (header & footer) ------------------------------------------------------------- */ /* When the has the .dark class, force the link colour (and therefore the SVG fill) to a bright green. */ body.dark .site-header .social-link, body.dark .site-footer .social-link a svg { color: #00ff88 !important; /* bright green – change the hex if you prefer another shade */ } /* ------------------------------------------------------------- Dark‑mode colour for the footer social‑media icons ------------------------------------------------------------- */ body.dark .site-footer .footer-links a, body.dark .site-footer .footer-links a svg { /* Same neon‑green used for the header icons */ color: #00ff88 !important; /* forces the colour */ }