@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular-Latin1.woff2"); font-display: swap; }

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular.woff2"); }

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Bold.woff2"); font-weight: bold; }

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Italic.woff2"); font-style: italic; }

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-BoldItalic.woff2"); font-style: italic; font-weight: bold; }

:root { --body-font-size: 1.125rem; --line-height: 1.75rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --small-font-size: 1rem; --quote-font-size: 1rem; }

@media (max-width: 600px) { :root { --body-font-size: 1.125rem; --line-height: 1.575rem; --h1-font-size: 1.625rem; --h2-font-size: 1.375rem; --small-font-size: 1rem; --quote-font-size: 1rem; } .about-picture { padding: 5%; } }

html { --box-background-color: hsl(240, 9%, 90%); --extra-light-text-color: hsl(240, 1%, 45%); --light-border-color: hsl(0, 0%, 90%); --light-text-color: hsl(240, 1%, 35%); --link-color: rgb(65, 110, 210); --main-background-color: white; --main-text-color: hsl(0, 0%, 10%); --underline-color: hsl(0, 0%, 50%); }

@media (prefers-color-scheme: dark) { html { --box-background-color: hsl(0, 0%, 20%); --extra-light-text-color: hsl(0, 0%, 55%); --light-border-color: hsl(0, 0%, 30%); --light-text-color: hsl(0, 0%, 65%); --link-color: hsl(193, 85%, 50%); --main-background-color: hsl(200, 3%, 12%); --main-text-color: hsl(0, 0%, 85%); --underline-color: hsl(0, 0%, 50%); } p { letter-spacing: .005em; } }

html { background-color: var(--main-background-color); color: var(--main-text-color); font-family: IBM Plex Sans, sans-serif; font-feature-settings: "kern" on; font-variant-ligatures: common-ligatures; height: 100%; margin: 0; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

* { margin: var(--line-height) 0 0 0; padding: 0; }

body { align-items: center; display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0 7.5%; }

p, li, details, summary { font-size: var(--body-font-size); line-height: 1.4; }

br { line-height: .5; }

nav { color: var(--light-text-color); font-size: var(--small-font-size); margin: 0; }

nav a { color: var(--light-text-color); text-decoration: none; }

main { flex: 1; margin: 0; max-width: 700px; width: 100%; }

header { font-family: IBM Plex Sans, sans-serif; margin: calc(3 * var(--line-height)) 0 calc(1.5 * var(--line-height)) 0; max-width: 700px; width: 100%; }

header h1 { border-bottom: 1px solid var(--light-text-color); font-size: var(--h1-font-size); font-variant-numeric: normal; line-height: 1.1; margin: 0; padding-bottom: calc(.25 * var(--line-height)); }

header nav { margin-top: calc(.25 * var(--line-height)); }

header a { color: var(--light-text-color); margin-right: 5%; text-decoration: none; }

time { color: var(--light-text-color); font-size: var(--small-font-size); }

.post-author-and-time { color: var(--light-text-color); margin-top: calc(.125 * var(--line-height)); }

footer { border-top: 1px solid var(--light-text-color); color: var(--light-text-color); font-family: IBM Plex Sans, sans-serif; margin: calc(3 * var(--line-height)) 0 calc(1.5 * var(--line-height)) 0; max-width: 700px; width: 100%; }
/*footer { border-top: 1px solid var(--light-text-color); color: var(--light-text-color); display: flex; flex-wrap: wrap; font-size: var(--small-font-size); margin: calc(3 * var(--line-height)) 0 calc(1.5 * var(--line-height)) 0; max-width: 700px; padding: 1em 0 calc(3 * var(--line-height)) 0; width: 100%; }*/
/* margin: calc(2.5 * var(--line-height)) 0 0 0;*/

footer nav { margin-top: calc(.25 * var(--line-height)); }

footer a { color: var(--light-text-color); margin-right: 5%; text-decoration: none; }

h2, h3 { font-family: IBM Plex Sans, sans-serif; font-size: var(--h2-font-size); margin: calc(var(--line-height) * 1.5) 0 0 0; font-weight: bold; }

h2 + p, h3 + p { margin-top: calc( var(--line-height) * .75); }

ul, ol { list-style-position: outside; padding-left: var(--line-height); }

li + li, ul li ul, ul li ul li { margin: calc(.5 * var(--line-height)) 0 0 0; }

blockquote { margin: var(--line-height) 0; padding: 0 1.5em; }

blockquote p { font-size: var(--quote-font-size); hanging-punctuation: first; line-height: 1.3; }

blockquote li { padding: 0; }

.quote-attribution { font-style: italic; margin-top: calc( .5 * var(--line-height)); }

a { color: var(--main-text-color); text-decoration-color: var(--extra-light-text-color); }

pre { font-family: IBM Plex Mono, monospace; font-size: 1rem; hanging-punctuation: none; overflow: visible; padding: var(--line-height); }

code { font-family: IBM Plex Mono, monospace; font-size: 1rem; line-height: 1.4; }

p code { background-color: var(--box-background-color); }

img { display: block; height: auto; margin: 0 auto; max-width: 100%; }

figcaption { color: var(--light-text-color); margin-top: calc(.5 * var(--line-height)); text-align: center; }

aside, .callout { background-color: var(--box-background-color); border-left: 5px solid var(--light-border-color); font-size: var(--small-font-size); margin: calc(1.25 *var(--line-height)) 0; padding: calc(.5 * var(--line-height)); }

aside * + *, .callout * + * { margin: 0; }

aside h2, aside h3, .callout h2, .callout h3 { font-size: var(--small-font-size); letter-spacing: 0; margin: 0 0 0 0; padding-top: 0; text-transform: none; }

aside h2 + *, aside h3 + *, .callout h2 + *, .callout h3 + * { margin-top: calc(.25 * var(--line-height)); }

aside p, aside li, .callout p, .callout li { font-size: var(--small-font-size); }

aside p + p, .callout p + p { margin: calc(.75 * var(--line-height)) 0 0 0; }

aside li, .callout li { margin: calc(.25 * var(--line-height)) 0 0 0; }

.blog-listing-link { color: var(--main-text-color); text-decoration: none; font-variant-numeric: normal; }

.blog-listing-link + time { color: var(--main-text-color); }

.tag-list { background-color: var(--main-background-color); border: none; display: flex; flex-wrap: wrap; margin-top: calc(.5 * var(--line-height)); padding: 0; }

.tag-list a, .tag-list button { background-color: var(--box-background-color); border: 1px solid var(--light-border-color); border-radius: 4px; color: var(--main-text-color); flex-grow: .01; font-size: var(--small-font-size); font-variant-numeric: oldstyle-nums; margin: 1% 2% 1% 0; padding: .25em .75em .25em .55em; text-decoration: none; }

.tag-list a:hover { background-color: var(--main-background-color); }

.posts-by-tag h2 { text-transform: uppercase; letter-spacing: .1em; }

.posts-by-tag .blog-listing-link { font-weight: 400; }

.internal-link, .internal-link a { color: var(--light-text-color); font-size: var(--small-font-size); text-decoration: none; }

.about-picture { float: right; margin: 0; padding: 1% 5% 5% 5%; width: clamp(100px, 200px, 50%); }

.about-picture img { border: 1px solid var(--main-background-color); border-radius: 1%; }

.copy-buttons { margin-top: calc(.5 * var(--line-height)); }

.sitemap a { text-decoration: none; }

.sitemap h2 { letter-spacing: 0; text-transform: none; }

.sitemap ul { list-style-type: none; }

.archive a { color: var(--main-text-color); text-decoration: none; text-decoration-color: var(--extra-light-text-color); }

.archive dt { font-weight: bold; }

.archive dd { padding-left: 50px; padding-bottom: 0px; }

.archive dl { line-height: 0; }

.footnotes li, .footnotes p { color: var(--light-font-color); font-size: var(--small-font-size); }

.search-bar { display: flex; margin-top: calc(.25 * var(--line-height)); }

.search-bar-input { margin-top: -25px; }

.form-control { background-color: var(--box-background-color); border: 1px solid var(--light-border-color); border-radius: 4px; color: var(--main-text-color); height: calc( 1.5 * var(--line-height)); flex: 5 1 auto; font-family: IBM Plex Sans, sans-serif; font-size: var(--small-font-size); margin-top: 0; min-width: 50%; padding-left: .5em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; }

.form-control::placeholder { color: var(--light-text-color); }

.btn-default { background-color: var(--box-background-color); border: 1px solid var(--light-border-color); border-radius: 4px; color: var(--main-text-color); font-family: IBM Plex Sans, sans-serif; font-size: var(--small-font-size); font-weight: normal; margin: 0 0 0 .5em; padding: 0 .5em; }

.btn-default:hover { background-color: var(--main-background-color); color: var(--link-color); text-decoration: underline; }

.small-caps { letter-spacing: .075em; }

.index-title { text-transform: uppercase; letter-spacing: .1em; }

.input-label { color: var(--main-text-color); font-weight: bold; font-size: var(--body-font-size); margin-bottom: 0; }

.quarter-line-space { display: block; margin-top: calc( .25 * var(--line-height)); }

.note-entry:first-of-type { border: none; }

.note-entry { border-top: 1px solid var(--light-border-color); margin: 0; padding: calc(1.25 * var(--line-height)) 0; }

.note-entry h1 { font-family: IBM Plex Sans, sans-serif; text-transform: uppercase; letter-spacing: .1em; margin: 0; }

.note-entry h2 { font-family: IBM Plex Sans, sans-serif; font-size: var(--body-font-size); }

.note-entry h1 + p, .note-entry h2 + p { margin-top: calc( var(--line-height) * .25); }

.note-date-line { color: var(--light-text-color); font-size: var(--small-text-size); }

.note-date-line a { color: var(--light-text-color); text-decoration: none; }

mark { background-color: #FFE500; }

a:hover { color: var(--link-color); text-decoration: underline; text-decoration-style: solid; }

a:visited:hover { color: #e33; }