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