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