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 blockquote + blockquote::before {
54 	content: "";
55 }
56 
57 p {
58 	text-align: justify;
59 	hyphens: auto;
60 	white-space: pre-wrap;
61 }
62 
63 img {
64 	max-width: 90%;
65 	height: auto;
66 }
67 
68 figure {
69 	margin: 0;
70 	padding: 0;
71 	text-align: center;
72 }
73 
74 figcaption {
75 	padding: 0.5rem;
76 	font-size: 0.9rem;
77 }
78 
79 pre {
80 	background-color: #f3f3f3;
81 	margin: 0;
82 	padding: 1rem;
83 	border-radius: 3px;
84 	overflow-x: auto;
85 
86 	text-align: left;
87 	text-align: initial;
88 }
89 
90 footer {
91 	margin-top: 2rem;
92 	text-align: center;
93 }
94 
95 footer hr {
96 	width: 100%;
97 	height: 1px;
98 	background-color: #222;
99 	border: 0;
100 	margin-bottom: 1rem;
101 }
102 
103 footer dl * {
104 	display: inline;
105 }
106 
107 
108 /* dark theme */
109 @media (prefers-color-scheme: dark) {
110 	body {
111 		color: #ffffea;
112 		background-color: #383838;
113 	}
114 
115 	a {
116 		color: #8e8eff;
117 	}
118 
119 	pre {
120 		background-color: #111;
121 	}
122 
123 	footer hr {
124 		background-color: #ffffea;
125 	}
126 }