:root { --bg: #181825; --navbar: #1e1e2e; --text: #cdd6f4; --link: #94e2d5; --link-highligt: #fff; --border: #222; } @media (prefers-color-scheme: light) { :root { --bg: #e6e9ef; --navbar: #eff1f5; --text: #4c4f69; --link: #179299; --link-highligt: #000; --border: #eff1f5; } } body { color: var(--text); background-color: var(--bg); font-family: monospace; font-size: 1.2em; line-height: 1.5; margin: 1rem; max-width: 43em; margin-right: 8em; } header { border-bottom: 1px solid var(--border); margin-bottom: 1rem; } footer { border-top: 1px solid var(--border); margin-top: 1rem; } a { color: var(--link); text-decoration: none; } .navbar { position: fixed; right: 0; top: 0; background-color: var(--navbar); bottom: 0; padding-right: 0.5em; } .navbar > ul { list-style-type: none; padding-left: 0.5em; } .navbar > ul > li > a { transition: color 200ms; font-size: 100%; } .navbar > ul > li > a:hover { color: var(--link-highligt); } .separator { border-top: 1px solid var(--border); margin-top: 1rem; }