:root { --bg: #020703; --panel: rgba(8, 22, 10, 0.55); --green: #33ff66; --green-dim: #1fbf4c; --green-faint: #137a30; --ink: #4dff7a; --muted: #2fae54; --faint: #1d7d3a; --rule: rgba(51, 255, 102, 0.35); --max: 48rem; } /* Font: VT323 (load in HTML ) */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ===== Theme toggle button ===== */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 20; font-family: "VT323", "Consolas", monospace; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); background: rgba(2, 7, 3, 0.85); border: 1px solid var(--green); border-radius: 0; padding: 0.3rem 0.7rem; cursor: pointer; text-shadow: 0 0 6px rgba(51, 255, 102, 0.6); transition: color 0.12s linear, background 0.12s linear, box-shadow 0.12s linear; } .theme-toggle::before { content: "\003E "; } .theme-toggle:hover { color: #ccffd9; background: rgba(8, 30, 14, 0.95); box-shadow: 0 0 14px -2px rgba(51, 255, 102, 0.7); } body { margin: 0; color: var(--ink); font-family: "VT323", "Consolas", "Courier New", monospace; font-size: 22px; line-height: 1.5; background-color: var(--bg); background-image: radial-gradient(ellipse at center, rgba(8, 40, 16, 0.55) 0%, var(--bg) 90%); background-attachment: fixed; min-height: 100vh; text-shadow: 0 0 4px rgba(51, 255, 102, 0.45); } /* CRT scanlines + vignette overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.28) 3px, rgba(0, 0, 0, 0.28) 4px ); } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 8; background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.5) 100%); } a { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--green-faint); transition: color 0.12s linear, text-shadow 0.12s linear; } a:hover { color: #ccffd9; border-bottom-color: var(--green); text-shadow: 0 0 8px rgba(51, 255, 102, 0.95); } .sheet { max-width: var(--max); margin: 0 auto; padding: 3.5rem 1.5rem 6rem; position: relative; z-index: 1; } hr { border: 0; height: 0; margin: 1.8rem 0; border-top: 1px dashed var(--rule); } /* ===== Site header ===== */ .site-header { text-align: left; } .site-title { font-size: 3.4rem; line-height: 1; margin: 0 0 0.4rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; color: var(--green); text-shadow: 0 0 6px rgba(51, 255, 102, 0.8), 0 0 18px rgba(51, 255, 102, 0.45); } .site-title::before { content: "> "; color: var(--green-dim); } .site-tagline { margin: 0 0 0.4rem; color: var(--muted); } .meta { margin: 0; font-size: 1rem; color: var(--faint); } /* ===== Posts ===== */ .posts { display: flex; flex-direction: column; gap: 2rem; } .post { position: relative; padding: 1.3rem 1.4rem 1.1rem; background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid var(--green); border-radius: 0; transition: border-color 0.15s linear, box-shadow 0.15s linear; } .post:hover { border-color: var(--green); box-shadow: inset 0 0 0 1px rgba(51, 255, 102, 0.25), 0 0 24px -6px rgba(51, 255, 102, 0.4); } .eyebrow { margin: 0 0 0.4rem; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-dim); } .eyebrow::before { content: "// "; } .post-title { font-size: 1.7rem; line-height: 1.2; margin: 0 0 0.3rem; letter-spacing: 0.02em; } .post-title a { color: var(--green); border-bottom: none; } .post-title a:hover { color: #ccffd9; text-shadow: 0 0 10px rgba(51, 255, 102, 0.9); } .post-meta { margin: 0 0 0.7rem; font-size: 1rem; color: var(--faint); } .post-summary { margin: 0 0 0.7rem; color: var(--ink); } .post-tags { margin: 0 0 0.8rem; font-size: 1rem; color: var(--muted); } .post-readmore { margin: 0; font-size: 1.05rem; letter-spacing: 0.04em; } .post-readmore a { border-bottom: none; color: var(--green); } .post-readmore a::after { content: " _"; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ===== Responsive ===== */ @media (max-width: 36rem) { body { font-size: 20px; } .sheet { padding: 2.5rem 1.2rem 4rem; } .site-title { font-size: 2.6rem; } .post { padding: 1.1rem 1.1rem 0.9rem; } .post-title { font-size: 1.45rem; } }