* { margin: 0; padding: 0; box-sizing: border-box; color: inherit; text-decoration: inherit; } 
html { background: var(--bg-0); color: var(--text-0); width: 100%; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; font-feature-settings: "liga" 1; min-width: 100vw; overflow-x: hidden; -webkit-text-size-adjust: 100%; } 
@media all and (min-width:640px) { html{ font-size: 16.5px; } } 
@media all and (min-width:720px) { html{ font-size: 17px; } } 
@media all and (min-width:960px) { html{ font-size: 18px; } } 
body { max-width: 944px; margin: 0 auto; padding: 0 24px; font-family: "Charter", serif; } 
header, h1, h2, h3, .sans { font-family: 'Space Grotesk', Helvetica, sans-serif; } 
code, .mono, summary { font-family: 'Source Code Pro', monospace; font-weight: 500; } 
.img-right { float: right; height: 300px; padding-left: 2em } 
:root { --text-0: rgba(255, 255, 255, 87%); 
--text-1: rgba(255, 255, 255, 60%); 
--bg-0: #121212; 
--bg-1: rgba(255, 255, 255, 5%); 
--bg-2: rgba(255, 255, 255, 12%); --accent: #ef5350; } 
@media (prefers-color-scheme: light) { :root { --text-0: rgba(0, 0, 0, 87%); --text-1: rgba(0, 0, 0, 66%); --bg-0: #fff; --bg-1: #f2f2f2; --bg-2: rgba(0,0,0,12%); } } 
body > header { display: flex; justify-content: space-between; align-items: center; margin: 2em 0; } 
nav a { margin-left: 1.5em; letter-spacing: 0.07em; font-size: .9rem; } 
h1 { font-size: 2.2rem; line-height: 1.6; letter-spacing: 0.2em; margin-top: 8rem; } 
h2 { font-size: 14px; letter-spacing: 0.3em; font-size: 0.8rem; } 
main a { display: block; margin-bottom: 24px; } 
span { color: var(--text-1); letter-spacing: 0.05em; font-size: 0.875rem; } 
p { color: var(--text-1); margin-top: 8rem; margin-bottom: 8rem; font-size: 1.1rem; } 
.red-text { color: #EF5350; }