*, *::before, *::after { box-sizing: border-box; } /* ── Light theme (default) ───────────────────────────────────────────────── */ :root { --color-bg: #ffffff; --color-bg-header: #ffffff; --color-bg-th: #f6f8fa; --color-text: #2c3e50; --color-text-muted: #6b7280; --color-border: #eaecef; --color-link: #3eaf7c; --color-link-footer:#3b82f6; } /* ── Dark theme — OS preference ──────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --color-bg: #0d1117; --color-bg-header: #161b22; --color-bg-th: #21262d; --color-text: #e6edf3; --color-text-muted: #8b949e; --color-border: #30363d; --color-link: #58a6ff; --color-link-footer:#79c0ff; } } /* ── Dark theme — manual override via .dark on ───────────────────── */ html.dark { --color-bg: #0d1117; --color-bg-header: #161b22; --color-bg-th: #21262d; --color-text: #e6edf3; --color-text-muted: #8b949e; --color-border: #30363d; --color-link: #58a6ff; --color-link-footer:#79c0ff; } /* ── Force light when explicitly chosen ─────────────────────────────────── */ html.light { --color-bg: #ffffff; --color-bg-header: #ffffff; --color-bg-th: #f6f8fa; --color-text: #2c3e50; --color-text-muted: #6b7280; --color-border: #eaecef; --color-link: #3eaf7c; --color-link-footer:#3b82f6; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); } header { border-bottom: 1px solid var(--color-border); height: 60px; display: flex; align-items: center; padding: 0 1.5rem; position: sticky; top: 0; background: var(--color-bg-header); z-index: 100; } nav { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 960px; margin: 0 auto; } .site-title { font-weight: 600; font-size: 1.1rem; color: var(--color-text); text-decoration: none; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; } nav ul a { color: var(--color-text); text-decoration: none; font-size: 0.9rem; } nav ul a:hover { color: var(--color-link); } /* ── Dark-mode toggle button ─────────────────────────────────────────────── */ #theme-toggle { background: none; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.25rem 0.5rem; display: flex; align-items: center; transition: border-color 0.15s, color 0.15s; } #theme-toggle:hover { border-color: var(--color-link); color: var(--color-link); } main { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; } h1, h2, h3 { font-weight: 600; line-height: 1.25; margin-top: 1.5rem; margin-bottom: 0.75rem; } h1 { font-size: 2rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } h2 { font-size: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3rem; } h3 { font-size: 1.1rem; } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } table { border-collapse: collapse; width: 100%; margin: 1rem 0; } th, td { border: 1px solid var(--color-border); padding: 0.5rem 1rem; text-align: left; } th { background: var(--color-bg-th); } ul, ol { padding-left: 1.5rem; } li { margin: 0.25rem 0; } img { max-width: 100%; height: auto; display: block; margin: 1rem auto; } .home-hero { text-align: center; padding: 2rem 0 1rem; border-bottom: 1px solid var(--color-border); margin-bottom: 2rem; } .home-hero h1 { font-size: 2.5rem; border-bottom: none; padding-bottom: 0; margin-bottom: 0.5rem; } .home-tagline { color: var(--color-text-muted); font-size: 1.1rem; margin: 0; } img[alt="picture-of-me"] { max-width: 300px; width: 100%; } hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; } footer { border-top: 1px solid var(--color-border); text-align: center; padding: 2rem 1.5rem; font-size: 0.9rem; color: var(--color-text-muted); } footer a { color: var(--color-link-footer); } @media (max-width: 640px) { nav ul { gap: 0.75rem; } nav { flex-wrap: wrap; height: auto; padding: 0.75rem 0; } header { height: auto; } h1 { font-size: 1.5rem; } }