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}
 14
 15::selection {
 16  background: var(--medium-gray);
 17  opacity: 0.3;
 18}
 19
 20* {
 21  box-sizing: border-box;
 22  text-decoration: none;
 23  padding: 0;
 24  margin: 0;
 25}
 26
 27main {
 28  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
 29  font-size: 18px;
 30  padding: 0;
 31  line-height: 160%;
 32}
 33
 34main article, table {
 35  min-width: 0;
 36}
 37
 38main h1 {
 39  font: 25px;
 40  padding: 10px 0 10px 0;
 41}
 42
 43main h2 {
 44  font-size: 25px;
 45}
 46
 47main h2, h3 {
 48  padding: 20px 0 15px 0;
 49}
 50
 51.logo img {
 52  max-height: 2.5rem;
 53  max-width: 2.5rem;
 54  vertical-align: middle;
 55  transform: translateY(-5%);
 56}
 57
 58.logo  {
 59  text-decoration: none;
 60  background: unset !important;
 61}
 62
 63.footer a {
 64  all: unset !important;
 65}
 66
 67.footer img {
 68  max-height: 2.5rem;
 69  max-width: 2.5rem;
 70  display: inline-block;
 71  vertical-align: middle;
 72  image-orientation: from-image;
 73  padding: 0 0 5px 5px;
 74  cursor: pointer;
 75}
 76
 77a {
 78  margin: 0;
 79  padding: 0;
 80  box-sizing: border-box;
 81  text-decoration: none;
 82  word-wrap: break-word;
 83}
 84
 85main a {
 86  color: var(--darker);
 87  text-decoration: underline;
 88}
 89
 90a:hover {
 91  text-decoration: underline;
 92  background: var(--medium-gray);
 93}
 94
 95body {
 96  max-width: 640px;
 97  padding: 0 13px;
 98  margin: 40px auto;
 99}
100
101main article img {
102  max-width: 100%;
103  width: 100%;
104  display: block;
105  margin: 0 0 15px 0;
106}
107
108main ul, main ol {
109  margin: 0 30px 7px 30px;
110}
111
112main ul ul {
113  margin-bottom: 0
114}
115
116.subtitle {
117  font-style: italic;
118  font-weight: normal;
119  font-variant: unset;
120  color: var(--dark);
121  padding: 0 0 20px 0;
122}
123
124.muted {
125  color: var(--gray);
126}
127.muted a {
128  color: var(--cyan);
129  text-decoration: underline;
130}
131
132article p {
133  padding: 7px 0 7px 0;
134}
135
136article a {
137  color: var(--dark);
138}
139
140.tagline {
141  padding: 50px 0 50px 0;
142}
143
144pre {
145  overflow-x: auto;
146  overflow-y: hidden;
147  padding: 10px;
148  min-width: 0;
149  background-color: var(--light-gray) !important;
150  margin-bottom: 10px;
151}
152
153code {
154  background-color: var(--light-gray);
155}
156
157.post-date {
158  color: var(--gray);
159  text-transform: lowercase;
160}
161
162table {
163  table-layout: fixed;
164  width: 100%;
165}
166
167table a {
168  text-decoration: none;
169}
170
171td {
172  padding: 7px 11px 0 11px;
173}
174
175td:first-child {
176  padding-left: 0;
177}
178
179td:last-child {
180  padding-right: 0;
181}
182
183.index-date {
184  white-space: nowrap;
185  vertical-align: baseline;
186  color: var(--gray);
187  text-transform: lowercase;
188}
189
190header {
191  padding-bottom: 20px;
192}
193
194hr {
195  max-width: 100%;
196  text-align: left;
197  margin: 20px 0 20px 0;
198}
199
200footer {
201  padding-top: 30px;
202}
203
204
205blockquote {
206  margin: 7px 0 7px 0;
207}
208
209blockquote p {
210  font-style: italic;
211  color: var(--darker);
212  padding-left: 20px;
213  border-left: 3px solid var(--gray);
214}
215
216nav ul {
217  padding: 0;
218  margin: 0;
219  list-style: none;
220  padding-bottom: 20px;
221}
222
223nav ul li {
224  padding-right: 10px;
225  display: inline-block;
226}
227
228@media (max-width: 385px) {
229  table, thead, tbody, th, td, tr { 
230    display: block; 
231  }
232  td {
233    padding: 0;
234    text-align: left;
235  }
236  tr {
237    padding: 10px 0 10px 0;
238  }
239  nav ul li {
240    display: block;
241  }
242}