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