1:root {
  2  --bg0: #fdf6e3;
  3  --bg1: #f3ead3;
  4  --bg2: #e9dfc2;
  5  --fg: #5c6a72;
  6  --red: #e67e80;
  7  --orange: #f57d26;
  8  --yellow: #dfa000;
  9  --green: #8da101;
 10  --aqua: #35a77c;
 11  --blue: #3a94c5;
 12  --purple: #df69ba;
 13  --gray0: #a6b0a0;
 14  --gray1: #939f91;
 15  --gray2: #829181;
 16  
 17  --space-xs: 0.25rem;
 18  --space-sm: 0.5rem;
 19  --space-md: 1rem;
 20  --space-lg: 2rem;
 21  --space-xl: 4rem;
 22  
 23  --font-serif: Arial,  sans-serif;
 24  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 25  --font-mono: 'Menlo', 'Monaco', 'Consolas', 'Lucida Console', monospace;
 26  
 27  --shadow-sm: 0 2px 8px rgba(92, 106, 114, 0.08);
 28  --shadow-md: 0 4px 16px rgba(92, 106, 114, 0.12);
 29}
 30
 31@media (prefers-color-scheme: dark) {
 32  :root {
 33    --bg0: #2b3339;
 34    --bg1: #323c41;
 35    --bg2: #3a454a;
 36    --fg: #d3c6aa;
 37    --red: #e67e80;
 38    --orange: #e69875;
 39    --yellow: #dbbc7f;
 40    --green: #a7c080;
 41    --aqua: #83c092;
 42    --blue: #7fbbb3;
 43    --purple: #d699b6;
 44    --gray0: #859289;
 45    --gray1: #7a8478;
 46    --gray2: #6f7770;
 47  }
 48}
 49
 50* {
 51  box-sizing: border-box;
 52  transition: background-color 0.3s ease, color 0.3s ease;
 53}
 54
 55html {
 56  color: var(--fg);
 57  background-color: var(--bg0);
 58  font-family: var(--font-serif);
 59  line-height: 1.7;
 60  font-size: 16px;
 61}
 62
 63body {
 64  margin: 0 auto;
 65  max-width: 40em;
 66  padding: var(--space-lg) var(--space-lg);
 67  background-color: var(--bg0);
 68  hyphens: auto;
 69  overflow-wrap: break-word;
 70  text-rendering: optimizeLegibility;
 71  font-kerning: normal;
 72}
 73
 74@media (max-width: 768px) {
 75  body {
 76    font-size: 17px;
 77    padding: var(--space-md) var(--space-md);
 78  }
 79}
 80
 81@media (max-width: 600px) {
 82  body {
 83    font-size: 16px;
 84    padding: var(--space-md);
 85  }
 86}
 87
 88h1, h2, h3, h4, h5, h6 {
 89  font-family: var(--font-sans);
 90  font-weight: 600;
 91  line-height: 1.3;
 92  margin-top: 2em;
 93  margin-bottom: 0.5em;
 94  color: var(--fg);
 95}
 96
 97h1 {
 98  font-size: 1.7em;
 99  color: var(--green);
100  border-bottom: 1px solid var(--bg2);
101  padding-bottom: 0.2em;
102  margin-top: 0;
103  margin-bottom: 0.5em;
104}
105
106h2 {
107  font-size: 1.5em;
108  color: var(--aqua);
109  border-bottom: 1px solid var(--bg2);
110  padding-bottom: 0.2em;
111  margin-top: 2em;
112  padding-top: 0.5em;
113}
114
115h3 {
116  font-size: 1.3em;
117  color: var(--blue);
118}
119
120a {
121  color: var(--blue);
122  text-decoration: none;
123  border-bottom: 1px solid transparent;
124  padding-bottom: 1px;
125}
126
127a:hover {
128  color: var(--aqua);
129  border-bottom: 1px solid var(--aqua);
130}
131
132p {
133  margin: 1.5em 0;
134  text-align: justify;
135}
136
137ul, ol {
138  padding-left: 1.8em;
139  margin: 1.5em 0;
140}
141
142li {
143  margin: 0.5em 0;
144}
145
146
147span.date {
148    font-size: 15px;
149    margin-right: 1.5em;
150    color: var(--gray0);
151}
152
153ul.posts {
154    margin: 0;
155}
156
157li.list-item {
158    list-style-type: none;
159    margin: 0;
160}
161
162code {
163  font-family: var(--font-mono);
164  font-size: 0.85em;
165  background-color: var(--bg1);
166  padding: 0.2em 0.4em;
167  border-radius: 4px;
168  color: var(--blue);
169}
170
171pre {
172  background-color: var(--bg1);
173  padding: 1.2em;
174  overflow-x: auto;
175  margin: 1.5em 0;
176  border-left: 2px solid var(--green);
177  box-shadow: var(--shadow-sm);
178  position: relative;
179  min-width: 100%;
180}
181
182pre code {
183  background-color: transparent;
184  padding: 0;
185  color: var(--fg);
186  font-size: 0.9em;
187  display: inline-block;
188  min-width: 100%;
189}
190
191hr {
192  border: none;
193  height: 2px;
194  background: var(--bg2);
195}
196
197table {
198  width: 100%;
199  border-collapse: collapse;
200  margin: 2em 0;
201  background-color: var(--bg1);
202  border-radius: 8px;
203  overflow: hidden;
204  box-shadow: var(--shadow-sm);
205}
206
207th {
208  background-color: var(--bg2);
209  color: var(--green);
210  font-weight: 600;
211  text-align: left;
212  padding: 0.8em 1em;
213  border-bottom: 2px solid var(--bg0);
214}
215
216td {
217  padding: 0.8em 1em;
218  border-bottom: 1px solid var(--bg2);
219}
220
221tr:last-child td {
222  border-bottom: none;
223}
224
225header#title-block-header {
226  text-align: left;
227  margin-bottom: var(--space-md);
228  padding-bottom: var(--space-sm);
229  border-bottom: 1px solid var(--bg2);
230}
231
232header .title {
233  font-size: 1.6em;
234  color: var(--green);
235  margin-bottom: 0.2em;
236  border-bottom: none;
237  font-weight: 600;
238  letter-spacing: -0.02em;
239}
240
241header .author {
242  display: inline;
243  font-style: italic;
244  font-size: 0.95em;
245  color: var(--gray1);
246  margin: 0;
247}
248
249header .date {
250  display: inline;
251  font-family: var(--font-serif);
252  font-size: 0.95em;
253  color: var(--gray1);
254  margin: 0;
255  margin-left: var(--space-sm);
256}
257
258header .date::before {
259  content: "•";
260  margin-right: var(--space-sm);
261  color: var(--gray2);
262  font-size: 0.8em;
263}
264
265nav#TOC {
266  margin: 1.5em 0 2em 0;
267  padding: 0.8em 1em;
268  background-color: transparent;
269  border-left: 2px solid var(--gray1);
270  border-radius: 0;
271  font-size: 0.9em;
272}
273
274nav#TOC::before {
275  content: "Table of Contents";
276  display: block;
277  font-family: var(--font-sans);
278  font-size: 0.85em;
279  font-weight: 600;
280  color: var(--gray1);
281  margin-bottom: 0.5em;
282  text-transform: uppercase;
283  letter-spacing: 0.5px;
284}
285
286nav#TOC ul {
287  list-style: none;
288  padding-left: 0;
289  margin: 0;
290}
291
292nav#TOC > ul {
293  padding-left: 0;
294}
295
296nav#TOC li {
297  margin: 0.3em 0;
298  position: relative;
299}
300
301nav#TOC a {
302  color: var(--fg);
303  text-decoration: none;
304  display: block;
305  padding: 0.1em 0.3em;
306  border-radius: 2px;
307  line-height: 1.4;
308}
309
310nav#TOC a:hover {
311  color: var(--aqua);
312}
313
314nav#TOC ul ul {
315  padding-left: 0.8em;
316  margin: 0.2em 0;
317  border-left: 1px solid var(--bg2);
318}
319
320nav#TOC ul ul a {
321  font-size: 0.95em;
322  color: var(--gray1);
323}
324
325nav#TOC ul ul a:hover {
326  color: var(--blue);
327}
328
329img {
330  max-width: 100%;
331  height: auto;
332  border-radius: 8px;
333  margin: 1.5em auto;
334  display: block;
335  box-shadow: var(--shadow-md);
336}