/* Gruvbox dark (default) */ :root { --bg: #282828; --bg1: #3c3836; --fg: #ebdbb2; --subtle: #928374; --accent: #b8bb26; --link: #83a598; } /* Gruvbox light — applied when JavaScript adds the "light" class to */ body.light { --bg: #fbf1c7; --bg1: #ebdbb2; --fg: #3c3836; --subtle: #7c6f64; --accent: #79740e; --link: #076678; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg); color: var(--fg); font-family: monospace; font-size: 1rem; height: 100vh; /* fill the viewport */ display: flex; flex-direction: column; overflow: hidden; /* prevent the whole page from scrolling */ } /* Theme toggle button — pinned to the right side of the header */ #theme-toggle { position: absolute; right: 2rem; background: none; border: none; cursor: pointer; color: var(--subtle); font-size: 1.1rem; font-family: monospace; } /* Header */ header { display: flex; align-items: center; justify-content: center; /* center the nav */ position: relative; /* needed to position the toggle button */ padding: 1rem 2rem; border-bottom: 1px solid var(--bg1); } nav { display: flex; gap: 2rem; } nav a { color: var(--fg); text-decoration: none; } nav a:hover, nav a.active { color: var(--accent); } .theme-label { cursor: pointer; color: var(--subtle); font-size: 1.1rem; user-select: none; } .theme-label:hover { color: var(--fg); } /* Main content — this is the only part that scrolls */ main { flex: 1; overflow-y: auto; padding: 3rem 2rem; max-width: 800px; width: 100%; margin: 0 auto; } main h1 { color: var(--accent); margin-bottom: 1rem; } main p { line-height: 1.7; margin-bottom: 1rem; } main ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } main ul li::before { content: "→ "; color: var(--accent); } main ul a { color: var(--link); text-decoration: none; } main ul a:hover { text-decoration: underline; } /* Footer */ footer { padding: 1rem 2rem; border-top: 1px solid var(--bg1); color: var(--subtle); font-size: 0.85rem; text-align: center; }