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   margin: 10px;
57   display: inline-block;
58 }
59 
60 section.with-image {
61 }
62 
63 @media only screen and (min-width: 768px) {
64   section.with-image {
65     display: flex;
66     flex-direction: row;
67   }
68 }
69 
70 section.with-image img {
71   object-fit: contain;
72 }
73 
74 section.with-image div {
75   overflow: auto;
76 }
77 
78 pre {
79   overflow: auto;
80   padding: 1rem;
81   background-color: #f0f0f0;
82   border-radius: 3px;
83 }
84 
85 pre.banner {
86   display: flex;
87   flex-direction: row;
88   justify-content: center;
89 }
90 
91 code, kbd {
92   color: #9d109d;
93 }
94 
95 ul.link-list {
96   list-style: disclosure-closed;
97 }
98 
99 footer {
100   margin-top: 4rem;
101   font-size: 0.8rem;
102   border-top: 1px solid;
103 }
104 
105 @media (prefers-color-scheme: dark) {
106   body {
107     background-color: #222;
108     color: white;
109   }
110 
111   a {
112     color: aqua;
113   }
114 
115   hr {
116     background-color: #ddd;
117   }
118 
119   pre {
120     background-color: #353535;
121   }
122 
123   code, kbd {
124     color: #ff4cff;
125   }
126 
127   img {
128     opacity: 0.8;
129     transition: opacity .2s ease-in-out;
130   }
131 
132   img:hover {
133     opacity: 1;
134   }
135 }
136 
137 @media (max-width: 400px) {
138   pre.banner { font-size: 9px; }
139 }
140 
141 @media (max-width: 500px) {
142   pre.banner { font-size: 10px; }
143 }