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