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