1 body {
2   font-family: monospace;
3   font-size: 14px;
4   max-width: 780px;
5   margin: 0 auto;
6   padding: 20px;
7 }
8 
9 .banner {
10     display: flex;
11     flex-direction: row;
12     justify-content: center;
13 }
14 
15 .banner pre {
16     background-color: transparent;
17 }
18 
19 h1::before {
20   content: "# ";
21 }
22 
23 h2 {
24   margin-top: 40px;
25 }
26 
27 h2::before {
28   content: "## ";
29 }
30 
31 h3::before {
32   content: "### ";
33 }
34 
35 .gallery {
36   display: flex;
37   flex-direction: row;
38   flex-wrap: wrap;
39   justify-content: space-around;
40 }
41 
42 .gallery figure {
43     width: 40%;
44     margin: 1rem;
45 }
46 
47 img {
48     max-width: 100%;
49     height: auto;
50 }
51 
52 .repology {
53     text-align: center;
54 }
55 
56 @media only screen and (min-width: 768px) {
57     .repology {
58         text-align: unset;
59         float: right;
60     }
61 }
62 
63 blockquote {
64   margin: 0;
65   padding: 0;
66 }
67 
68 blockquote::before {
69   content: "> ";
70 }
71 
72 blockquote p {
73   font-style: italic;
74   display: inline;
75 }
76 
77 p.link::before {
78   content: "→ ";
79 }
80 
81 strong::before { content: "*" }
82 strong::after  { content: "*" }
83 
84 hr {
85   border: 0;
86   height: 1px;
87   background-color: #222;
88   width: 100%;
89   display: block;
90   margin: 2em auto;
91 }
92 
93 img {
94   margin: 10px;
95   display: inline-block;
96 }
97 
98 section.with-image {
99   margin-top: 1rem;
100 }
101 
102 @media only screen and (min-width: 768px) {
103   section.with-image {
104     display: flex;
105     flex-direction: row;
106   }
107 }
108 
109 section.with-image img {
110   object-fit: contain;
111 }
112 
113 section.with-image div {
114   overflow: auto;
115 }
116 
117 pre {
118   overflow: auto;
119   padding: 1rem;
120   background-color: #f0f0f0;
121   border-radius: 3px;
122 }
123 
124 pre.banner {
125   display: flex;
126   flex-direction: row;
127   justify-content: center;
128 }
129 
130 code, kbd {
131   color: #9d109d;
132 }
133 
134 ul.link-list {
135   list-style: disclosure-closed;
136 }
137 
138 footer {
139   margin-top: 4rem;
140   font-size: 0.8rem;
141   border-top: 1px solid;
142 }
143 
144 @media (prefers-color-scheme: dark) {
145   body {
146     background-color: #222;
147     color: white;
148   }
149 
150   a {
151     color: aqua;
152   }
153 
154   hr {
155     background-color: #ddd;
156   }
157 
158   pre {
159     background-color: #353535;
160   }
161 
162   code, kbd {
163     color: #ff4cff;
164   }
165 
166   img {
167     opacity: 0.8;
168     transition: opacity .2s ease-in-out;
169   }
170 
171   img:hover {
172     opacity: 1;
173   }
174 }
175 
176 @media (max-width: 400px) {
177   pre.banner { font-size: 9px; }
178 }
179 
180 @media (max-width: 500px) {
181   pre.banner { font-size: 10px; }
182 }