/* ByteShyft — OG Minimal CSS (v1)
Goals: high contrast, neon pop, no overlays/animations, no class dependencies.
Safe to use with pure HTML. Remove to roll back instantly. */


:root {
--bg: #000; /* deep black */
--fg: #eaffef; /* bright terminal text */
--muted: #c9f7d0; /* secondary */
--neon: #39ff14; /* primary Matrix green */
--neon-soft: #9aff9a; /* softer green for headings */
--line: rgba(57,255,20,.55);
--shadow: 0 0 14px rgba(57,255,20,.65), 0 0 30px rgba(57,255,20,.30);
}


/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:var(--bg); color:var(--fg);
font: 16px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


/* Container that works even if your HTML has no wrappers */
main, .wrap, body > header, body > footer, section{
max-width: 1100px; margin: 0 auto; padding: 14px 16px;
}


/* Links — crisp, poppy */
a{ color: var(--neon); text-decoration:none; border-bottom:1px dotted var(--neon); }
a:hover{ color:#fff; text-shadow: var(--shadow); border-bottom-color:#fff; }


/* Headings */
h1,h2,h3{ margin: 0 0 .6rem 0; }
h1{ color:#b8ffb8; text-shadow: var(--shadow); font-size: clamp(1.4rem, 3.6vw, 1.8rem); }
h2{ color: var(--neon-soft); text-shadow: var(--shadow); font-size: clamp(1.1rem, 3.2vw, 1.25rem); letter-spacing:.25px }
h3{ color: var(--neon-soft); }


/* Simple bracketed nav looks sharp even with plain <a> tags */
nav{ display:flex; gap:10px; flex-wrap:wrap; margin:.4rem 0; }
nav a{ padding:6px 10px; border:1px solid var(--line); border-radius:8px; box-shadow: inset 0 0 0 1px rgba(57,255,20,.18); color:#fff }
nav a:hover{ border-color: var(--neon); }


/* Section frames (works on bare <section> tags) */
section{ margin-top:18px; border:1px solid var(--line); border-radius:10px; box-shadow: var(--shadow); background: rgba(0,0,0,.25); }
section > *{ margin-left: 2px; }


/* Pre / code blocks for your ABOUT text */
pre, code{ color: var(--fg); }
pre{ white-space: pre-wrap; overflow-wrap:anywhere; margin:0; }


/* Project list: handles bare paragraphs and links cleanly */
article, .card{ border:1px solid var(--line); border-radius:10px; padding:12px; background: rgba(0,0,0,.35); box-shadow: var(--shadow); }
.grid, .cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:14px; }


/* Footer */
footer{ text-align:center; color: var(--muted); margin: 26px 0 60px; }


/* Mobile */
@media (max-width:720px){
main, .wrap, body>header, body>footer, section{ padding: 12px }
}