1:root {
  2  --bg: #f4f4f4;
  3  --cyan: #509c93;
  4  --light-gray: #eee;
  5  --gray: #6a6a6a;
  6  --code: #666;
  7  --dark: #444;
  8  --darker: #222;
  9}
 10
 11html {
 12  background: var(--bg);
 13}
 14
 15::selection {
 16  background: var(--dark);
 17  color: var(--bg);
 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
 90table a {
 91  text-decoration: none;
 92}
 93
 94a:hover {
 95  text-decoration: underline;
 96  background: var(--light-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  background-color: var(--light-gray);
159}
160
161pre > code {
162  color: var(--code);
163}
164
165.post-date {
166  color: var(--gray);
167  text-transform: lowercase;
168}
169
170table {
171  width: 100%;
172}
173
174.index-date {
175  white-space: nowrap;
176  vertical-align: baseline;
177  color: var(--gray);
178  text-transform: lowercase;
179}
180
181.index-post {
182  padding-bottom: 7px;
183}
184
185header {
186  padding-bottom: 20px;
187}
188
189hr {
190  max-width: 100%;
191  text-align: left;
192  margin: 20px 0 20px 0;
193}
194
195footer {
196  padding-top: 30px;
197}
198
199
200blockquote {
201  margin: 7px 0 7px 0;
202}
203
204blockquote p {
205  font-style: italic;
206  color: var(--darker);
207  padding-left: 20px;
208  border-left: 3px solid var(--gray);
209}
210
211nav ul {
212  padding: 0;
213  margin: 0;
214  list-style: none;
215  padding-bottom: 20px;
216}
217
218nav ul li {
219  padding-right: 10px;
220  display: inline-block;
221}
222
223@media (max-width: 385px) {
224  nav ul li {
225    display: block;
226  }
227}