1 body {
2 	color: #222;
3 	background-color: #fefefe;
4 
5 	max-width: 870px;
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 	text-align: center;
51 }
52 
53 figcaption {
54 	padding: 0.5rem;
55 }
56 
57 footer {
58 	margin-top: 2rem;
59 	text-align: center;
60 }
61 
62 footer hr {
63 	width: 100%;
64 	height: 1px;
65 	background-color: #222;
66 	border: 0;
67 	margin-bottom: 1rem;
68 }
69 
70 footer dl * {
71 	display: inline;
72 }
73 
74 
75 /* dark theme */
76 @media (prefers-color-scheme: dark) {
77 	body {
78 		color: #ffffea;
79 		background-color: #383838;
80 	}
81 
82 	a {
83 		color: #8e8eff;
84 	}
85 
86 	footer hr {
87 		background-color: #ffffea;
88 	}
89 }