@charset "UTF-8";
/* Variables */
/* Imports */
@font-face { font-family: "m-1m"; src: url("/assets/fonts/MplusCodeLatin50-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "m-1m"; src: url("/assets/fonts/MplusCodeLatin50-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; }

@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/LibreBaskerville-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/LibreBaskerville-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; }

@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/LibreBaskerville-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; }

:root { --primary-color: hsl(0, 0%, 27%); --primary-color-lighter: hsl(0, 0%, 50%); --primary-color-dim: color-mix(in srgb, hsl(0, 0%, 27%) 30%, white); --offset-color: hsl(0, 0%, 97%); --comments-stripe-color: hsl(0, 0%, 95%); --success-color: hsl(120, 50%, 90%); --error-color: hsl(0, 50%, 90%); }

@media (prefers-color-scheme: dark) { :root { --primary-color: hsl(0, 0%, 87%); --primary-color-lighter: hsl(0, 0%, 60%); --offset-color: hsl(0, 0%, 10%); --comments-stripe-color: hsl(0, 0%, 18%); --success-color: hsl(120, 50%, 20%); --error-color: hsl(0, 50%, 20%); } }

:root { --secondary-color: hsl(200, 98%, 50%); --secondary-color-lighter: hsl(199, 98%, 60%); --secondary-color-dim: hsla(199, 98%, 50%, 0.05); --accent-color: hsl(154, 50%, 50%); --accent-color-lighter: hsl(154, 50%, 50%); --accent-color-dim: hsla(154, 50%, 50%, 0.1); }

@media (prefers-color-scheme: dark) { :root { --secondary-color: hsl(202, 78%, 66%); --secondary-color-lighter: hsl(202, 78%, 75%); --secondary-color-dim: hsla(202, 78%, 75%, 0.05); --accent-color: hsl(0, 61%, 61%); --accent-color-lighter: hsl(0, 61%, 61%); --accent-color-dim: hsla(0, 61%, 61%, 0.1); } }

:root { --secondary-color: hsl(122, 39%, 49%); --secondary-color-lighter: hsl(122, 39%, 60%); --secondary-color-dim: hsla(122, 39%, 49%, 0.05); --accent-color: hsl(14, 100%, 56%); --accent-color-lighter: hsl(14, 100%, 56%); --accent-color-dim: hsla(14, 100%, 56%, 0.1); }

@media (prefers-color-scheme: dark) { :root { --secondary-color: hsl(122, 29%, 42%); --secondary-color-lighter: hsl(122, 29%, 60%); --secondary-color-dim: hsla(122, 39%, 29%, 0.05); --accent-color: hsl(14, 80%, 56%); --accent-color-lighter: hsl(14, 80%, 56%); --accent-color-dim: hsla(14, 80%, 56%, 0.1); } }

:root { --secondary-color: hsl(26, 43%, 36%); --secondary-color-lighter: color-mix(in srgb, var(--secondary-color) 80%, white); --secondary-color-dim: color-mix(in srgb, var(--secondary-color) 5%, white); --accent-color: hsl(36, 84%, 50%); --accent-color-lighter: color-mix(in srgb, var(--accent-color) 80%, white); --accent-color-dim: color-mix(in srgb, var(--accent-color) 20%, white); }

@media (prefers-color-scheme: dark) { :root { --primary-color: hsl(0, 0%, 75%); --primary-color-dim: color-mix(in srgb, var(--primary-color) 50%, black); --offset-color: hsl(0, 0%, 14%); --secondary-color: hsl(26, 30%, 60%); --secondary-color-lighter: color-mix(in srgb, var(--secondary-color) 70%, black); --secondary-color-dim: color-mix(in srgb, var(--secondary-color) 20%, black); --accent-color: hsl(36, 84%, 80%); --accent-color-lighter: color-mix(in srgb, var(--accent-color) 80%, black); --accent-color-dim: color-mix(in srgb, var(--accent-color) 30%, black); } div.zoom-overlay { background: var(--offset-color); } }

/* General */
html { font-size: 16px; }

@media (max-width: 940px) { html { font-size: 18px; } }

body { background-color: var(--offset-color); color: var(--primary-color); font-family: "Libre Baskerville", georgia, serif; margin: 4rem 0 3rem 15vw; width: 600px; }

@media (max-width: 940px) { body { margin: 1em; width: auto; } }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

.content-main > h4[id] { font-style: italic; }

@media (max-width: 940px) { h1 { margin-bottom: 0; } }

a:link { color: var(--secondary-color); }

a:visited { color: var(--secondary-color-lighter); }

a:hover { background-color: var(--secondary-color); color: var(--offset-color); text-decoration: none; }

.box { padding: 0.5em; margin-bottom: 2rem; }

.box-info { background-color: var(--secondary-color-dim); border-top: 1px dotted var(--secondary-color-lighter); }

.box-success { background-color: var(--success-color); }

.box-error { background-color: var(--error-color); }

/* Header */
.menu-toggle { height: 0; left: 0; position: absolute; top: 0; width: 0; }

.menu-toggle:checked ~ .site-header { display: initial; }

.menu-toggle:checked ~ .content-main { opacity: 0.4; }

.menu-toggle:checked ~ .menu-close-link { display: initial; }

.menu-open-link, .menu-close-link { background: var(--offset-color); border: 1px solid var(--accent-color-lighter); color: var(--accent-color-lighter); cursor: pointer; display: block; font-family: "m-1m", "m+ 1m", monospace; font-size: 2rem; height: 2.5rem; line-height: 2.2rem; position: fixed; right: 1rem; text-align: center; text-decoration: none; top: 1rem; width: 2.5rem; z-index: 2; }

.menu-close-link { display: none; }

.site-header { background: var(--offset-color); border-left: 1px solid var(--accent-color-dim); bottom: 0; display: none; font-family: "m-1m", "m+ 1m", monospace; font-size: 0.8em; padding: 1rem 5rem 1rem 1rem; position: fixed; right: 0; text-align: right; top: 0; z-index: 1; }

.site-header h1 { font-family: inherit; font-size: 1.5em; font-weight: normal; line-height: 2.4; margin: 0; padding-bottom: 0; text-transform: uppercase; }

.site-header h1 a[href] { background: var(--offset-color); color: var(--accent-color); margin: 0; padding: 0; }

.site-header h1 a[href]:hover { color: var(--offset-color); }

.site-header a[href] { background: var(--secondary-color); color: var(--offset-color); display: inline-block; padding: 0 0.7em; text-decoration: none; }

.site-header a.external[href] { background: var(--primary-color); }

.site-header a[href]:hover { background: var(--accent-color); }

.site-header .description { color: var(--secondary-color-lighter); display: inline-block; font-family: "Libre Baskerville", georgia, serif; font-style: italic; margin: 0.5rem 0 0; max-width: 12rem; }

/* Search */
.site-search { display: flex; flex-direction: column; margin-top: 1rem; margin-bottom: 1rem; }

.site-search input { background-color: var(--offset-color); border: 1px solid var(--secondary-color); font-family: "m-1m", "m+ 1m", monospace; line-height: 2; padding: 0 0.7em; }

.site-search input:focus { border-color: var(--accent-color); outline: none; }

@media (prefers-color-scheme: dark) { .site-search input { color: var(--primary-color); } }

@media (max-width: 940px) { .site-header input[type="search"] { text-align: inherit; } }

/* Footer */
.site-footer { color: var(--secondary-color); text-align: center; -webkit-text-stroke: 1px var(--secondary-color); -webkit-text-fill-color: var(--offset-color); }

/* Navigation */
.site-header nav { line-height: 1.6; margin-top: 2rem; text-transform: lowercase; }

.site-header nav a[href] { margin-bottom: 0.5em; }

.site-header nav ul { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; }

@media (max-width: 940px) { .site-header nav ul { text-align: inherit; } }

/* Posts */
.post { margin-bottom: 6rem; position: relative; }

.post h1 { font-size: 1.4rem; font-variant: small-caps; margin: 1rem 0 0.5rem; }

.post h1 a { color: var(--accent-color); color: inherit; text-decoration: none; }

.post h1 a:hover { background-color: initial; color: var(--secondary-color); }

.post-body { line-height: 1.5; margin-bottom: 2rem; margin-top: 2rem; }

.post-body figcaption { font-size: 0.8em; font-style: italic; text-align: center; }

.post-body hr { margin: 2rem auto; opacity: 0.3; width: 4rem; }

.post-body ol { padding-left: 1.5em; }

.post-body a[href^="http"]::after { content: '⧉'; display: inline-block; margin-left: 0.3rem; text-decoration: none; }

.post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { font-weight: bold; margin-top: 2rem; }

@media (max-width: 940px) { .post-body img { margin-left: -1em; width: 100vw; } .post-body ol img { margin-left: -2.5em; } }

.post-meta { color: var(--primary-color-dim); font-size: small; }

.post-meta ul { list-style: none; margin: 0; padding: 0; }

.post-meta li { display: inline-block; vertical-align: top; }

.post-meta li::after { content: ' /'; opacity: 0.3; }

.post-meta li:last-child::after { content: ''; }

.post-meta a { color: inherit; }

.post-meta a:hover { background: initial; color: var(--secondary-color); text-decoration: underline; }

.post-meta .post-category::before { content: '#'; }

.post-quote blockquote { border-left: 1px solid var(--accent-color); font-size: 2.4rem; font-style: normal; margin: 0; padding-left: 1rem; }

.post-quote blockquote p { margin: 0; }

.post-quote blockquote cite { font-size: 1rem; }

blockquote { border-left: 0.5rem solid var(--secondary-color-dim); margin: 2rem 0; padding: 0 1rem; }

/* Code blocks and inline code */
.highlight code { background-color: var(--secondary-color-dim); display: block; font-family: "m-1m", "m+ 1m", monospace; padding: 0.5em 1em; }

p code { color: var(--primary-color-lighter); font-family: "m-1m", "m+ 1m", monospace; }

@media (max-width: 940px) { .highlight code { margin-left: -1em; margin-right: -1em; } }

/* Comments */
.comments { font-size: 1rem; margin-bottom: 6rem; }

.comments ul { list-style: none; padding: 0; margin: 0; }

.comments li:nth-child(odd) { background-color: var(--comments-stripe-color); }

.comments li { padding: 1rem; }

.comments li .comment { font-size: 0.9rem; line-height: 1.5; margin: 0; padding: 0; }

.comments .author::before { content: '—'; }

.comments .comment { margin-bottom: 1rem; }

.comments .author, .comments time { font-size: 0.8rem; font-style: italic; }

.comments time { color: #999999; }

.comments h4::before { content: '*'; display: block; text-align: center; margin: 1rem 0; }

.comments form { font-family: "m-1m", "m+ 1m", monospace; font-size: 0.8rem; }

.comments form p:first-of-type { display: none; }

.comments textarea, .comments input { background: transparent; border: 1px solid var(--primary-color-lighter); box-sizing: border-box; color: var(--primary-color); margin: 0.4rem 0; padding: 0.2rem; width: 100%; }

.comments input { display: block; line-height: 1.5; margin-top: 0.2rem; }

.comments .box { display: none; }

.comments .box:target { display: block; }

/* Archives and Categories */
menu ul { margin: 2rem 0 1rem; padding: 0; list-style: none; }

menu li { display: inline-block; }

menu li::after { content: ' /'; opacity: 0.1; }

menu li:last-child::after { display: none; }

.targeted-sections > section { display: none; }

.targeted-sections > section:target { display: inherit; }

#all:target ~ .targeted-sections > section { display: inherit; }

.posts-list { list-style: none; margin: 0 0 2em; padding: 0; }

.posts-list li { margin: 0.5em 0; }

.posts-list time, .posts-list .post-category { font-size: 0.8em; }

.posts-list .post-excerpt { font-size: smaller; margin: 0 0 2rem 1rem; }

/* Definition Lists (Blogroll) */
dd { font-size: 1rem; margin: 0; }

dt { padding-bottom: 0.5rem; padding-top: 2rem; }

dt:first-of-type { padding-top: 0; }

/* New Post page */
.post-new textarea { background: transparent; color: var(--primary-color); font-family: "m-1m", "m+ 1m", monospace; font-size: smaller; height: 15rem; margin: 2rem 0 0; width: 90%; }

/*# sourceMappingURL=main.css.map */