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