:root { --primary: #fff; --secondary: #eee; --text: #111; --links: #00f; } @media (prefers-color-scheme: dark) { :root { --primary: #181820; --secondary: #22222f; --text: #eee; --links: #aaf; } img { filter: brightness(85%); } } body { background: var(--primary); margin: 0; color: var(--text); line-height: 1.5; font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; padding: .75rem; max-width: 47rem; margin: auto; } hr { display: none; } a { color: var(--links); } h1 { font-size: 1.953rem; line-height: 1.1; } h2 { font-size: 1.563rem; line-height: 1.2; } h3 { font-size: 1.25rem; line-height: 1.4; } h1+h2, h2+h3, h1 { margin-top: 2rem; margin-bottom: .75rem; } img { display: block; height: auto; max-width: 100%; max-height: 20rem; } table { display: block; border-collapse: collapse; overflow: auto; } tbody { display: table; width: 100%; } td, th { text-align: left; padding: .75rem; } tr:nth-child(even) { background: var(--secondary); } pre, code { font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; background: var(--secondary); } pre { padding: .75rem; max-width: 100%; display: block; overflow-x: auto; overflow-y: hidden; }