1 body {
2 	color: #222;
3 	background-color: #fefefe;
4 
5 	max-width: 670px;
6 	margin: 0 auto;
7 	border: 0;
8 	padding: 1rem;
9 }
10 
11 header nav ul {
12     list-style: none;
13     padding: 0;
14     margin: 0;
15 }
16 
17 header nav ul li {
18     display: inline-block;
19     margin-right: 10px;
20 }
21 
22 h1, h2, h3 {
23 	margin: 2rem 0 1rem;
24 }
25 
26 h1 { font-size: 200%; }
27 h2 { font-size: 160%; }
28 h3 { font-size: 120%; }
29 
30 nav ul {
31 	list-style: disclosure-closed;
32 }
33 
34 nav ul li {
35     margin: .3rem 0;
36 }
37 
38 blockquote {
39 	font-style: italic;
40 	margin: 1rem;
41 	margin-left: 1.5rem;
42 	position: relative;
43 }
44 
45 blockquote::before {
46 	content: "“";
47 	font-size: 2rem;
48 	position: absolute;
49 	top: -0.5rem;
50 	left: -1rem;
51 }
52 
53 p {
54 	text-align: justify;
55 	hyphens: auto;
56 	white-space: pre-wrap;
57 }
58 
59 img {
60 	max-width: 90%;
61 	height: auto;
62 }
63 
64 figure {
65 	margin: 0;
66 	padding: 0;
67 	text-align: center;
68 }
69 
70 figcaption {
71 	padding: 0.5rem;
72 	font-size: 0.9rem;
73 }
74 
75 pre {
76 	background-color: #f3f3f3;
77 	margin: 0;
78 	padding: 1rem;
79 	border-radius: 3px;
80 	overflow-x: auto;
81 
82 	text-align: left;
83 	text-align: initial;
84 }
85 
86 footer {
87 	margin-top: 2rem;
88 	text-align: center;
89 }
90 
91 footer hr {
92 	width: 100%;
93 	height: 1px;
94 	background-color: #222;
95 	border: 0;
96 	margin-bottom: 1rem;
97 }
98 
99 footer dl * {
100 	display: inline;
101 }
102 
103 
104 /* dark theme */
105 @media (prefers-color-scheme: dark) {
106 	body {
107 		color: #ffffea;
108 		background-color: #383838;
109 	}
110 
111 	a {
112 		color: #8e8eff;
113 	}
114 
115 	pre {
116 		background-color: #111;
117 	}
118 
119 	footer hr {
120 		background-color: #ffffea;
121 	}
122 }