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: "Charter", "Georgia", "Noto Serif", 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}
168
169table {
170  width: 100%;
171}
172
173.index-date {
174  white-space: nowrap;
175  vertical-align: baseline;
176  color: var(--gray);
177}
178
179.index-post {
180  padding-bottom: 7px;
181}
182
183header {
184  padding-bottom: 20px;
185}
186
187hr {
188  max-width: 100%;
189  text-align: left;
190  margin: 20px 0 20px 0;
191}
192
193footer {
194  padding-top: 30px;
195}
196
197.post-date {
198  color: var(--gray);
199}
200
201blockquote {
202  margin: 7px 0 7px 0;
203}
204
205blockquote p {
206  font-style: italic;
207  color: var(--darker);
208  padding-left: 20px;
209  border-left: 3px solid var(--gray);
210}
211
212nav ul {
213  padding: 0;
214  margin: 0;
215  list-style: none;
216  padding-bottom: 20px;
217}
218
219nav ul li {
220  padding-right: 10px;
221  display: inline-block;
222}
223
224@media (max-width: 385px) {
225  nav ul li {
226    display: block;
227  }
228}