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