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: "InterVariable", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
 33  font-size: 1.05rem;
 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  padding: 2px 0 20px 0;
162  margin-top: 3px !important;
163  margin-bottom: 5px;
164  color: var(--gray);
165}
166
167.muted {
168  color: var(--gray);
169}
170.muted a {
171  color: var(--cyan);
172  border-bottom: 1.5px solid var(--cyan);
173}
174
175article p {
176  padding: 7px 0 7px 0;
177}
178
179article a {
180  color: var(--dark);
181}
182
183.tagline {
184  padding: 50px 0 50px 0;
185}
186
187pre {
188  overflow-x: auto;
189  overflow-y: hidden;
190  padding: 10px;
191  min-width: 0;
192  background-color: var(--light-gray) !important;
193  margin-bottom: 10px;
194}
195
196code {
197  font-size: 0.9rem;
198  background-color: var(--light-gray);
199}
200
201.post-date {
202  color: var(--gray);
203  text-transform: lowercase;
204}
205
206table {
207  table-layout: fixed;
208  width: 100%;
209}
210
211table a {
212  text-decoration: none;
213}
214
215td {
216  padding: 7px 11px 7px 11px;
217}
218
219td p#subtitle {
220  color: var(--gray);
221}
222
223td:first-child {
224  padding-left: 0;
225}
226
227td:last-child {
228  padding-right: 0;
229}
230
231.index-date {
232  white-space: nowrap;
233  vertical-align: baseline;
234  color: var(--gray);
235  text-transform: lowercase;
236}
237
238header {
239  padding-bottom: 20px;
240}
241
242hr {
243  max-width: 100%;
244  text-align: left;
245  margin: 20px 0 20px 0;
246}
247
248footer {
249  padding-top: 30px;
250}
251
252
253blockquote {
254  margin: 7px 0 7px 0;
255}
256
257blockquote p {
258  font-style: italic;
259  color: var(--darker);
260  padding-left: 20px;
261  border-left: 1.5px solid var(--medium-gray);
262}
263
264nav ul {
265  padding: 0;
266  margin: 0;
267  list-style: none;
268  padding-bottom: 20px;
269}
270
271nav ul li {
272  padding-right: 10px;
273  display: inline-block;
274}
275
276
277ol {
278  list-style: none;
279  counter-reset: counter;
280}
281ol li {
282  counter-increment: counter;
283}
284ol li:not(.footnotes)::before {
285  content: counter(counter);
286  border-radius: 50%;
287  text-align: center;
288  line-height: 1.2rem;
289  color: var(--darker);
290  background: var(--medium-gray);
291  width: 18px;
292  height: 18px;
293  font-size: 11px;
294  margin-right: .5rem;
295  box-sizing: content-box;
296  display: inline-block;
297  transform: translate(-1.9rem, 0.7rem);
298  position: absolute;
299}
300
301.footnote-ref a {
302  text-decoration: none;
303  color: var(--light);
304  border-radius: 50%;
305  text-align: center;
306  line-height: 0.8rem;
307  background: var(--cyan);
308  width: 0.8rem;
309  height: 0.8rem;
310  font-size: 0.6rem;
311  display: inline-block;
312}
313
314.footnotes > ol li::before {
315  content: counter(counter);
316  border-radius: 50%;
317  text-align: center;
318  line-height: 1.2rem;
319  color: var(--light);
320  background: var(--cyan);
321  width: 18px;
322  height: 18px;
323  font-size: 11px;
324  margin-right: .5rem;
325  box-sizing: content-box;
326  display: inline-block;
327  position: relative;
328  transform: unset;
329}
330
331.footnotes ol li:not(:last-child) {
332  padding-bottom: 2rem;
333}
334
335@media (max-width: 400px) {
336  .footer {
337    column-count: 1;
338  }
339
340  .image-grid {
341    column-count: 1;
342  }
343
344  table, thead, tbody, th, td, tr { 
345    display: block; 
346  }
347  td {
348    padding: 0;
349    text-align: left;
350  }
351  tr {
352    padding: 10px 0 10px 0;
353  }
354}