:root{--highlight-colour:#333399;--muted-colour:#333333;--width:80ch;font-size:16px}body{display:flex;flex-direction:column;font-family:roboto condensed,sans-serif;margin:0;min-height:100vh;padding:0 1em}header{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;flex-wrap:wrap;row-gap:1em;column-gap:2em;padding:2em 0;width:100%;max-width:var(--width);margin:0 auto;h1 { font-size: 1.25em; line-height: 1em; margin: 0; color: var(--highlight-colour); } a { text-decoration: none; } a:link { color: black; } a:visited { color: black; } nav { ul { display: flex; flex-direction: row; justify-content: right; gap: 1.5em; list-style: none; margin: 0; padding: 0; font-size: 1em; } }}main{max-width:var(--width);width:100%;margin:0 auto;h1,h2,h3,h4,h5,h6 { margin-top: 1.5em; margin-bottom: 0.5em; font-family: "Roboto Condensed", sans-serif; line-height: 1.25em; } h1 { font-size: 3em; } h2 { font-size: 2.25em; a { text-decoration: none; } a:link { color: black; } a:visited { color: black; } a:hover { color: var(--highlight-colour); } } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1rem; } h6 { font-size: .875rem; } h7 { font-size: .75rem; } p { line-height: 1.5em; } p, li { font-family: 'Roboto', sans-serif; } a:link { color: var(--highlight-colour); } a:visited { color: var(--highlight-colour); } img.lede { width: 100%; height: auto; margin-top: 0.5em; } blockquote { background: #f9f9f9; border-left: 0.5em solid #ccc; margin: 0; padding: 0.5em; p { margin: 0.5em; } } article { margin-bottom: 3em; img { width: 100%; min-width: 100%; height: auto; } } .home { img#portrait { width: 100%; max-width: 50ch; height: auto; } }}main:has(.home){}footer{width:100%;max-width:var(--width);margin:0 auto;padding-top:2em;p { color: #888; }}