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: initial;
68 }
69 
70 footer {
71 	margin-top: 2rem;
72 	text-align: center;
73 }
74 
75 footer hr {
76 	width: 100%;
77 	height: 1px;
78 	background-color: #222;
79 	border: 0;
80 	margin-bottom: 1rem;
81 }
82 
83 footer dl * {
84 	display: inline;
85 }
86 
87 
88 /* dark theme */
89 @media (prefers-color-scheme: dark) {
90 	body {
91 		color: #ffffea;
92 		background-color: #383838;
93 	}
94 
95 	a {
96 		color: #8e8eff;
97 	}
98 
99 	footer hr {
100 		background-color: #ffffea;
101 	}
102 }