:root { --base: #191724; --surface: #1f1d2e; --overlay: #26233a; --muted: #6e6a86; --subtle: #908caa; --text: #e0def4; --love: #eb6f92; --gold: #f6c177; --rose: #ebbcba; --pine: #31748f; --foam: #9ccfd8; --iris: #c4a7e7; --highlightLow: #21202e; --highlightMed: #403d52; --highlightHigh: #524f67; } html { background-color: var(--base); color: var(--text); } body { margin: 1em auto; width: min(40em, 90%); background-color: var(--surface); border: 1px solid var(--highlightMed); padding: 1em; font-family: serif; font-size: 110%; } a { color: var(--iris); } figure { text-align: right; padding-right: 0.5em; margin-top: 4em; border-right: 0.2em solid var(--highlightHigh); } figcaption::before { content: '—'; }