:root{--root-color:#f8f8f8;--text-color:#222;--bq-text:#444;--link-color:#24C;--active-link-color:#35F;--back-shadow:#0001}body{color:var(--text-color);background:var(--root-color);font-family:newsreader,serif;font-size:18px;max-width:1200px;margin:auto}h1,h2,h3{font-weight:400}a{color:inherit;text-decoration:none}img{max-width:100%}header>nav{margin-top:1rem;margin-bottom:2rem;> div { display: inline-block; } > div.-left { padding: 1rem 3rem 1rem 1rem; background: var(--back-shadow); border-left: 3px black solid; .title { font-family: "Kode Mono", monospace; font-size: 1.75rem; margin-top: 0; margin-bottom: 0; } .subtext { font-size: 0.75rem; } } > div.-right { float: right; line-height: 3rem; padding: 1rem; a { display: inline-block; font-family: "Fredericka the Great", serif; font-size: 1.5rem; margin: 0 1rem 0; &:hover { transform: scale(1.2); } } }}footer{border-top:1px solid var(--text-color);margin-top:1rem}main{font-size:1.35rem;h1, h2, h3 { font-family: "Fredericka the Great", serif; } .code-block, .code-inline { font-family: "Source Code Pro", monospace; } time { font-variant: small-caps; letter-spacing: 0.125rem; font-weight: 325; } article { > * { margin-left: auto; margin-right: auto; max-width: 100%; } > p, > h2, > h3, > h4, > ul, > ol { max-width: 80%; } > h1 { max-width: 60%; margin: 0 auto 4rem; text-align: center; font-size: 3rem; line-height: 1.35; text-shadow: white 0 2px 2px; } p { line-height: 1.75; text-align: justify; } .code-block { position: relative; line-height: 1.5; font-size: 1rem; padding: 1rem; border-radius: 0.25rem; .type { position: absolute; right: 0.5rem; top: 0.5rem; font-size: 60%; color: var(--h-kw); } } figure { display: table; padding: 0.5rem 2rem; margin: 3rem auto; background: var(--back-shadow); & > img { display: block; } & > figcaption { display: table-caption; caption-side: bottom; text-align: center; font-size: 85%; padding-top: 0; padding: 0.5rem; background: var(--back-shadow); } } p > code { padding: 0.25rem; white-space: pre; background: var(--back-shadow); } blockquote { max-width: 65%; font-size: 90%; color: var(--bq-text); border-left: 0.25rem var(--bq-text) solid; padding: 0.125rem 1rem; background: var(--back-shadow); border-radius: 0.25rem; } } a { color: var(--link-color); &:hover { text-decoration: underline; color: var(--active-link-color); text-shadow: 0 0 3px rgba(from var(--link-color) r g b / 0.5); } }}