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}
115
116body {
117  max-width: 655px;
118  padding: 0 13px;
119  margin: 40px auto;
120}
121
122main article img {
123  max-width: 100%;
124  width: 100%;
125  display: block;
126  margin: 10px auto 4px auto;
127}
128
129main ul, main ol {
130  margin: 0 30px 7px 30px;
131}
132
133main ul ul {
134  margin-bottom: 0
135}
136
137.row {
138  display: flex;
139  flex-wrap: wrap;
140  padding: 0 0.5rem 0.5rem 0;
141}
142
143.subtitle {
144  font-style: italic;
145  font-weight: normal;
146  font-variant: unset;
147  color: var(--dark);
148  padding: 0 0 20px 0;
149}
150
151.muted {
152  color: var(--gray);
153}
154.muted a {
155  color: var(--cyan);
156  border-bottom: 1.5px solid var(--cyan);
157}
158
159article p {
160  padding: 7px 0 7px 0;
161}
162
163article a {
164  color: var(--dark);
165}
166
167.tagline {
168  padding: 50px 0 50px 0;
169}
170
171pre {
172  overflow-x: auto;
173  overflow-y: hidden;
174  padding: 10px;
175  min-width: 0;
176  background-color: var(--light-gray) !important;
177  margin-bottom: 10px;
178}
179
180code {
181  font-size: 0.9rem;
182  background-color: var(--light-gray);
183}
184
185.post-date {
186  color: var(--gray);
187  text-transform: lowercase;
188}
189
190table {
191  table-layout: fixed;
192  width: 100%;
193}
194
195table a {
196  text-decoration: none;
197}
198
199td {
200  padding: 7px 11px 7px 11px;
201}
202
203td p#subtitle {
204  color: var(--gray);
205}
206
207td:first-child {
208  padding-left: 0;
209}
210
211td:last-child {
212  padding-right: 0;
213}
214
215.index-date {
216  white-space: nowrap;
217  vertical-align: baseline;
218  color: var(--gray);
219  text-transform: lowercase;
220}
221
222header {
223  padding-bottom: 20px;
224}
225
226hr {
227  max-width: 100%;
228  text-align: left;
229  margin: 20px 0 20px 0;
230}
231
232footer {
233  padding-top: 30px;
234}
235
236
237blockquote {
238  margin: 7px 0 7px 0;
239}
240
241blockquote p {
242  font-style: italic;
243  color: var(--darker);
244  padding-left: 20px;
245  border-left: 1.5px solid var(--medium-gray);
246}
247
248nav ul {
249  padding: 0;
250  margin: 0;
251  list-style: none;
252  padding-bottom: 20px;
253}
254
255nav ul li {
256  padding-right: 10px;
257  display: inline-block;
258}
259
260
261ol {
262  list-style: none;
263  counter-reset: counter;
264}
265ol li {
266  counter-increment: counter;
267}
268ol li:not(.footnotes)::before {
269  content: counter(counter);
270  border-radius: 50%;
271  text-align: center;
272  line-height: 1.2rem;
273  color: var(--darker);
274  background: var(--medium-gray);
275  width: 18px;
276  height: 18px;
277  font-size: 11px;
278  margin-right: .5rem;
279  box-sizing: content-box;
280  display: inline-block;
281  transform: translate(-1.9rem, 0.7rem);
282  position: absolute;
283}
284
285.footnote-ref a {
286  text-decoration: none;
287  color: var(--light);
288  border-radius: 50%;
289  text-align: center;
290  line-height: 0.8rem;
291  background: var(--cyan);
292  width: 0.8rem;
293  height: 0.8rem;
294  font-size: 0.6rem;
295  display: inline-block;
296}
297
298.footnotes > ol li::before {
299  content: counter(counter);
300  border-radius: 50%;
301  text-align: center;
302  line-height: 1.2rem;
303  color: var(--light);
304  background: var(--cyan);
305  width: 18px;
306  height: 18px;
307  font-size: 11px;
308  margin-right: .5rem;
309  box-sizing: content-box;
310  display: inline-block;
311  position: relative;
312  transform: unset;
313}
314
315.footnotes ol li:not(:last-child) {
316  padding-bottom: 2rem;
317}
318
319@media (max-width: 385px) {
320  .footer {
321    column-count: 1;
322  }
323
324  table, thead, tbody, th, td, tr { 
325    display: block; 
326  }
327  td {
328    padding: 0;
329    text-align: left;
330  }
331  tr {
332    padding: 10px 0 10px 0;
333  }
334}