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