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