:root { --color-bg: hsl(0, 0%, 11%); --color-text: hsl(0, 0%, 93%); --color-link: hsl(0, 0%, 100%); --color-strong: hsl(0, 100%, 78%); --color-emphasis: hsl(34, 100%, 50%); --color-heading: hsl(215, 100%, 84%); --font-size: 18px; --font-family: system-ui, sans-serif; --font-weight: 400; --font-weight-bold: 500; --line-height: 1.4; --max-width: 700px; } body { background-color: var(--color-bg); color: var(--color-text); font-size: var(--font-size); font-family: var(--font-family); font-weight: var(--font-weight); line-height: var(--line-height); } article { max-width: var(--max-width); margin: 0 auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); font-weight: var(--font-weight-bold); color: var(--color-heading); margin-top: 2rem; margin-bottom: 0; } h1 { font-size: 3rem; } h2 { font-size: 2.5rem; text-align: center; } h3 { font-size: 1.5rem; } h4 { font-size: 1.2rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0.5rem; } em, i { color: var(--color-emphasis); } strong, b { color: var(--color-strong); font-weight: var(--font-weight-bold); } a { color: var(--color-link); } table { border-collapse: collapse; width: 100%; max-width: 100%; margin: 1em 0; font-size: 1em; background-color: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-text); } th, td { padding: 0.5em 0.5em; text-align: left; border-bottom: 1px solid var(--color-text); } th { background: var(--color-bg); font-weight: 500; }