1 body {
2   font-family: monospace;
3   font-size: 14px;
4   max-width: 780px;
5   margin: 0 auto;
6   padding: 20px;
7 }
8 
9 h1::before {
10   content: "# ";
11 }
12 
13 h2 {
14   margin-top: 40px;
15 }
16 
17 h2::before {
18   content: "## ";
19 }
20 
21 h3::before {
22   content: "### ";
23 }
24 
25 blockquote {
26   margin: 0;
27   padding: 0;
28 }
29 
30 blockquote::before {
31   content: "> ";
32 }
33 
34 blockquote p {
35   font-style: italic;
36   display: inline;
37 }
38 
39 p.link::before {
40   content: "→ ";
41 }
42 
43 strong::before { content: "*" }
44 strong::after  { content: "*" }
45 
46 hr {
47   border: 0;
48   height: 1px;
49   background-color: #222;
50   width: 100%;
51   display: block;
52   margin: 2em auto;
53 }
54 
55 img {
56   border-radius: 5px;
57 }
58 
59 pre {
60   overflow: auto;
61   padding: 1rem;
62   background-color: #f0f0f0;
63   border-radius: 3px;
64 }
65 
66 pre.banner {
67   display: flex;
68   flex-direction: row;
69   justify-content: center;
70 }
71 
72 code, kbd {
73   color: #9d109d;
74 }
75 
76 ul.link-list {
77   list-style: disclosure-closed;
78 }
79 
80 img {
81   display: block;
82   margin: 0 auto;
83   max-width: 100%;
84 }
85 
86 footer {
87   margin-top: 4rem;
88   font-size: 0.8rem;
89   border-top: 1px solid;
90 }
91 
92 @media (prefers-color-scheme: dark) {
93   body {
94     background-color: #222;
95     color: white;
96   }
97 
98   a {
99     color: aqua;
100   }
101 
102   hr {
103     background-color: #ddd;
104   }
105 
106   pre {
107     background-color: #353535;
108   }
109 
110   code, kbd {
111     color: #ff4cff;
112   }
113 }
114 
115 @media (max-width: 400px) {
116   pre.banner { font-size: 9px; }
117 }
118 
119 @media (max-width: 500px) {
120   pre.banner { font-size: 10px; }
121 }