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: 14px;
 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: 640px;
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: 0 0 15px 0;
110}
111
112main ul, main ol {
113  margin: 0 30px 7px 30px;
114}
115
116main ul ul {
117  margin-bottom: 0
118}
119
120.subtitle {
121  font-style: italic;
122  font-weight: normal;
123  font-variant: unset;
124  color: var(--dark);
125  padding: 0 0 20px 0;
126}
127
128.muted {
129  color: var(--gray);
130}
131.muted a {
132  color: var(--cyan);
133  text-decoration: underline;
134}
135
136article p {
137  padding: 7px 0 7px 0;
138}
139
140article a {
141  color: var(--dark);
142}
143
144.tagline {
145  padding: 50px 0 50px 0;
146}
147
148pre {
149  overflow-x: auto;
150  overflow-y: hidden;
151  padding: 10px;
152  min-width: 0;
153  background-color: var(--light-gray) !important;
154  margin-bottom: 10px;
155}
156
157code {
158  font-size: 13px;
159  background-color: var(--light-gray);
160}
161
162.post-date {
163  color: var(--gray);
164  text-transform: lowercase;
165}
166
167table {
168  table-layout: fixed;
169  width: 100%;
170}
171
172table a {
173  text-decoration: none;
174}
175
176td {
177  padding: 7px 11px 0 11px;
178}
179
180td:first-child {
181  padding-left: 0;
182}
183
184td:last-child {
185  padding-right: 0;
186}
187
188.index-date {
189  white-space: nowrap;
190  vertical-align: baseline;
191  color: var(--gray);
192  text-transform: lowercase;
193}
194
195header {
196  padding-bottom: 20px;
197}
198
199hr {
200  max-width: 100%;
201  text-align: left;
202  margin: 20px 0 20px 0;
203}
204
205footer {
206  padding-top: 30px;
207}
208
209
210blockquote {
211  margin: 7px 0 7px 0;
212}
213
214blockquote p {
215  font-style: italic;
216  color: var(--darker);
217  padding-left: 20px;
218  border-left: 3px solid var(--gray);
219}
220
221nav ul {
222  padding: 0;
223  margin: 0;
224  list-style: none;
225  padding-bottom: 20px;
226}
227
228nav ul li {
229  padding-right: 10px;
230  display: inline-block;
231}
232
233@media (max-width: 385px) {
234  table, thead, tbody, th, td, tr { 
235    display: block; 
236  }
237  td {
238    padding: 0;
239    text-align: left;
240  }
241  tr {
242    padding: 10px 0 10px 0;
243  }
244}