1:root {
  2    --light: #f4f4f4;
  3    --cyan: #509c93;
  4    --light-gray: #eee;
  5    --medium-gray: #ddd;
  6    --gray: #6a6a6a;
  7    --dark: #444;
  8    --darker: #222;
  9    --white: #fff;
 10    --cyan-trans: rgba(80, 156, 147, 0.3);
 11
 12    --font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
 13}
 14
 15@media (prefers-color-scheme: dark) {
 16    :root {
 17        --light: #222;
 18        --cyan: #509c93;
 19        --light-gray: #444;
 20        --medium-gray: #666;
 21        --gray: #ccc;
 22        --dark: #ddd;
 23        --darker: #fff;
 24        --white: #000;
 25    }
 26
 27    html {
 28        background: var(--light);
 29        color: var(--gray);
 30    }
 31
 32    main a {
 33        color: var(--gray);
 34        border-bottom: 1.5px solid var(--medium-gray);
 35    }
 36
 37    a:hover {
 38        border-bottom: 1.5px solid var(--gray);
 39    }
 40
 41    blockquote p {
 42        border-left: 1.5px solid var(--gray);
 43    }
 44
 45    pre {
 46        background-color: var(--dark);
 47    }
 48
 49    .logo, .footimgs {
 50        filter: invert(1);
 51        svg {
 52            fill: var(--gray);
 53        }
 54    }
 55}
 56
 57html {
 58    background: var(--white);
 59    -webkit-text-size-adjust: none;
 60}
 61
 62::selection {
 63    background: var(--cyan-trans);
 64    color: var(--darker);
 65}
 66
 67del {
 68    text-decoration: line-through !important;
 69}
 70
 71* {
 72    box-sizing: border-box;
 73    padding: 0;
 74    margin: 0;
 75}
 76
 77main,
 78footer {
 79    font-family: var(--font-content);
 80    font-size: 1.05rem;
 81    padding: 0;
 82    line-height: 160%;
 83    font-weight: 400;
 84}
 85
 86main article,
 87table {
 88    min-width: 0;
 89}
 90
 91h1,
 92h2,
 93h3 {
 94    font-weight: 400 !important;
 95}
 96
 97strong {
 98    font-weight: 500;
 99}
100
101main h1 {
102    font-size: 30px;
103    padding: 40px 0 20px 0;
104}
105
106main h2 {
107    color: var(--dark);
108}
109
110main h2,
111h3 {
112    margin: 40px 0 20px 0;
113}
114
115.logo img {
116    max-height: 2.5rem;
117    max-width: 2.5rem;
118    transform: translateY(-10%);
119}
120
121.logo {
122    flex-grow: 1;
123    margin-right: 1rem;
124    text-decoration: none;
125    border-bottom: unset;
126    background: unset !important;
127}
128
129.logo:hover {
130    border-bottom: unset;
131}
132
133.footimgs a {
134    all: unset !important;
135}
136
137.footimgs img {
138    max-height: 2.5rem;
139    max-width: 2.5rem;
140    display: inline-block;
141    vertical-align: middle;
142    image-orientation: from-image;
143    padding: 0 0 5px 5px;
144    cursor: pointer;
145}
146
147a {
148    margin: 0;
149    padding: 0;
150    box-sizing: border-box;
151    text-decoration: none;
152    word-wrap: break-word;
153}
154
155main a {
156    color: var(--darker);
157    border-bottom: 1.5px solid var(--medium-gray);
158}
159
160a:hover {
161    border-bottom: 1.5px solid var(--cyan-trans);
162}
163
164.footer {
165    column-count: 2;
166    column-gap: 12px;
167}
168
169body {
170    max-width: 655px;
171    padding: 0 13px;
172    margin: 40px auto;
173}
174
175main article img {
176    max-width: 100%;
177    width: 100%;
178    display: block;
179    margin: 10px auto 4px auto;
180}
181
182main ul,
183main ol {
184    margin: 0 30px 7px 30px;
185}
186
187main ul ul {
188    margin-bottom: 0;
189}
190
191.row {
192    display: flex;
193    flex-wrap: wrap;
194    padding: 0 0.5rem 0.5rem 0;
195}
196
197.image-grid {
198    column-count: 2;
199}
200
201.image-grid img {
202    all: unset;
203    object-fit: cover;
204    position: relative;
205    width: 100%;
206    margin-bottom: 12px;
207}
208
209.image-grid a {
210    border-bottom: unset;
211}
212
213.subtitle {
214    padding: 2px 0 20px 0;
215    margin-top: 3px !important;
216    margin-bottom: 5px;
217    color: var(--gray);
218    line-height: 1.5;
219}
220
221.muted {
222    color: var(--gray);
223}
224.muted a {
225    color: var(--cyan);
226    border-bottom: 1.5px solid var(--cyan);
227}
228
229article p {
230    padding: 7px 0 7px 0;
231}
232
233article a {
234    color: var(--dark);
235}
236
237.tagline {
238    padding: 50px 0 50px 0;
239}
240
241pre {
242    overflow-x: auto;
243    overflow-y: hidden;
244    padding: 10px;
245    min-width: 0;
246    background-color: var(--light-gray) !important;
247    margin-bottom: 10px;
248}
249
250code {
251    font-size: 0.9rem;
252    background-color: var(--light-gray);
253}
254
255.post-date {
256    color: var(--gray);
257    text-transform: lowercase;
258}
259
260table {
261    table-layout: fixed;
262    width: 100%;
263}
264
265table a {
266    text-decoration: none;
267}
268
269td {
270    padding: 7px 11px 7px 11px;
271}
272
273td p#subtitle {
274    color: var(--gray);
275}
276
277td:first-child {
278    padding-left: 0;
279}
280
281td:last-child {
282    padding-right: 0;
283}
284
285.index-date {
286    white-space: nowrap;
287    vertical-align: baseline;
288    color: var(--gray);
289    text-transform: lowercase;
290}
291
292header {
293    padding-bottom: 20px;
294}
295
296hr {
297    max-width: 100%;
298    text-align: left;
299    margin: 20px 0 20px 0;
300}
301
302footer {
303    padding-top: 30px;
304}
305
306blockquote {
307    margin: 7px 0 7px 0;
308}
309
310blockquote p {
311    font-style: italic;
312    color: var(--darker);
313    padding-left: 20px;
314    border-left: 1.5px solid var(--medium-gray);
315}
316
317nav {
318  display: flex;
319  align-items: center;
320}
321
322nav ul {
323    flex-shrink: 1;
324    padding: 0;
325    margin: 0;
326    list-style: none;
327    padding-bottom: 20px;
328}
329
330nav ul li {
331    padding-right: 10px;
332    display: inline-block;
333}
334
335ol {
336    list-style: none;
337    counter-reset: counter;
338}
339ol li {
340    counter-increment: counter;
341}
342ol li:not(.footnotes)::before {
343    content: counter(counter);
344    border-radius: 50%;
345    text-align: center;
346    line-height: 1.2rem;
347    color: var(--darker);
348    background: var(--medium-gray);
349    width: 18px;
350    height: 18px;
351    font-size: 11px;
352    margin-right: 0.5rem;
353    box-sizing: content-box;
354    display: inline-block;
355    transform: translate(-1.9rem, 0.7rem);
356    position: absolute;
357}
358
359.footnote-ref a {
360    text-decoration: none;
361    color: var(--light);
362    border-radius: 50%;
363    text-align: center;
364    line-height: 0.8rem;
365    background: var(--cyan);
366    width: 0.8rem;
367    height: 0.8rem;
368    font-size: 0.6rem;
369    display: inline-block;
370}
371
372.footnotes > ol li::before {
373    content: counter(counter);
374    border-radius: 50%;
375    text-align: center;
376    line-height: 1.2rem;
377    color: var(--light);
378    background: var(--cyan);
379    width: 18px;
380    height: 18px;
381    font-size: 11px;
382    margin-right: 0.5rem;
383    box-sizing: content-box;
384    display: inline-block;
385    position: relative;
386    transform: unset;
387}
388
389.footnotes ol li:not(:last-child) {
390    padding-bottom: 2rem;
391}
392
393.draft {
394    color: red;
395    font-weight: bold;
396    font-family: sans;
397    font-size: 1rem;
398}
399
400@media (max-width: 400px) {
401    .footer {
402        column-count: 1;
403    }
404
405    .image-grid {
406        column-count: 1;
407    }
408
409    table,
410    thead,
411    tbody,
412    th,
413    td,
414    tr {
415        display: block;
416    }
417    td {
418        padding: 0;
419        text-align: left;
420    }
421    tr {
422        padding: 10px 0 10px 0;
423    }
424}