:root { --primary: #fff; --secondary: #eee; --text: #111; --links: #00f; } @media (prefers-color-scheme: dark) { :root { --primary: #111; --secondary: #222222; --text: #eee; --links: #aaf; } img { filter: brightness(90%); } } body { background: var(--primary); margin: 0; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-size: 1rem; padding: .75rem; max-width: 40rem; margin: auto; } a { color: var(--links); } img { display: block; height: auto; max-width: 100%; max-height: 30rem; } table { display: block; border-collapse: collapse; overflow: auto; } tbody { display: table; width: 100%; } td, th { text-align: left; padding: .375rem; } 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; } blockquote { font-style: italic; padding: .5rem; padding-left: 1.25rem; border-left: .25rem solid var(--secondary); margin: 0; }