* { 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; } hgroup { margin: 4rem 64px 4rem 64px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .m { margin-left: 11%; position: relative; } .r { text-align: end; } h1 { font-size: 6em; } .red { color: #EF5350; } .blue { color: #42A5F5; } article { margin: 0 0 1rem -24px; padding-left: 20px; position: relative; border-left: var(--accent) solid 4px; } article > a { font-size: 1.3rem; letter-spacing: 0.05em; } article > div { font-size: .9rem; } article > time { color: var(--text-1); font-size: .9rem; display: block; margin-bottom: 4px; } article > div { color: var(--text-1) } article a { color: var(--text-0); position: relative; } .shapes { z-index: -1; position: absolute; margin-left: -340px; margin-top: -500px; } @media screen and (min-width: 1248px) { time { position: absolute; left: 0; top: 0; transform: translateX(calc(-100% - 24px)); } } @media screen and (max-width: 1248px) { .shapes { display: none; } } @media screen and (max-width: 1200px) { .m { margin-left: 0; } .r { text-align: left; } hgroup { margin-left: 0; margin-right: 0; } h1 { font-size: 4em; line-height: 100%; } h2 { font-size: 2em; line-height: 100%; } }