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