1:root {
  2  --bg-page: #f4f4f4;
  3  --bg-dark: #eee;
  4  --bg-limited: #ddd;
  5  --fg: #000;
  6  --fg-subtle: #666;
  7  --fg-limited: #509c93;
  8  --hl: #c2c2c2;
  9}
 10
 11@media (prefers-color-scheme: dark) {
 12  :root {
 13    --bg-page: #111;
 14    --bg-dark: #222;
 15    --fg: #ccc;
 16    --hl: #333;
 17    --fg-subtle: #ccc;
 18    --fg-limited: #509c93;
 19    --bg-limited: #333;
 20  }
 21}
 22
 23* {
 24  font-size: 14px !important;
 25}
 26
 27body {
 28  background: var(--bg-page);
 29  color: var(--fg);
 30  font-size: 14px !important;
 31  word-wrap: break-word;
 32  font-family: -apple-system, sans-serif, "Noto Color Emoji";
 33  line-height: 1.2;
 34  overscroll-behavior-y: contain;
 35}
 36pre, code {
 37  white-space: pre-wrap;
 38}
 39blockquote {
 40  margin-left: 0em;
 41  margin-bottom: 0em;
 42  padding-left: 0.5em;
 43  border-left: 1px solid var(--fg-subtle);
 44}
 45cite {
 46  margin-left: 2em;
 47}
 48table {
 49  display: block;
 50  max-width: 100%;
 51  overflow-x: auto;
 52}
 53a {
 54  color: var(--fg);
 55}
 56form, input, textarea {
 57  font-family: -apple-system, sans-serif, "Noto Color Emoji";
 58}
 59p {
 60  margin-top: 1em;
 61  margin-bottom: 1em;
 62}
 63input {
 64  background: var(--bg-page);
 65  color: var(--fg);
 66  font-size: 1.0em;
 67  line-height: 1.2em;
 68  padding: 0.4em;
 69}
 70#honkform input {
 71  font-size: 0.8em;
 72}
 73body > header {
 74  max-width: 700px;
 75  margin: 1em auto;
 76  font-size: 1.5em;
 77}
 78body > header span {
 79  margin-left: 2em;
 80}
 81body > header p {
 82  padding: 1em;
 83}
 84header > details {
 85  background: var(--bg-page);
 86  padding: 1em 1em 1em 1em;
 87  position: fixed;
 88  top: 0;
 89  left: 0;
 90  display: inline;
 91  max-height: calc(100% - 1em);
 92  overflow: auto;
 93  opacity: 0.7;
 94  overscroll-behavior: contain;
 95  z-index: 2;
 96}
 97header > details[open] {
 98  padding: 1em 1em 0em 1em;
 99  background: var(--bg-dark);
100  border: 1px solid var(--hl);
101  margin-bottom: 1em;
102  opacity: 1.0;
103}
104header > details summary span {
105  display: none;
106}
107header > details[open] summary span {
108  display: inline;
109}
110header > details li {
111  margin: 1em 0em 1em 0em;
112}
113details summary {
114  cursor: pointer;
115}
116main {
117  max-width: 1200px;
118  margin: auto;
119  font-size: 1.5em;
120}
121hr {
122  border-color: var(--hl);
123}
124.info {
125  background: var(--bg-dark);
126  border: 1px solid var(--hl);
127  margin-bottom: 1em;
128  padding: 0em 1em 0em 1em;
129}
130.info div {
131  margin-top: 1em;
132  margin-bottom: 1em;
133}
134label {
135  font-size: 0.8em;
136}
137label.button, button, select {
138  font-size: 16px;
139  font-family: -apple-system, sans-serif;
140  color: var(--fg);
141  background: var(--bg-page);
142  border: 1px solid var(--hl);
143  padding: 0.5em;
144  white-space: nowrap;
145}
146.buttonarray {
147  margin-top: -2.0em;
148}
149.buttonarray button, .buttonarray > span {
150  margin-top: 2.0em;
151  display: inline-block;
152}
153button a {
154  text-decoration: none;
155}
156button {
157  cursor: pointer;
158}
159form {
160  margin-top: 1em;
161}
162textarea {
163  padding: 0.5em;
164  font-size: 1em;
165  background: var(--bg-page);
166  color: var(--fg);
167  width: 600px;
168  height: 4em;
169  margin-bottom: 0.5em;
170  box-sizing: border-box;
171  max-width: 100%;
172}
173textarea#honknoise {
174  height: 10em;
175}
176input[type="checkbox"] {
177  position: fixed;
178  top: -9999px;
179}
180input[type="checkbox"] + span:after {
181  content: "no";
182}
183input[type="checkbox"]:checked + span:after {
184  content: "yes";
185}
186input[type="checkbox"]:focus + span:after {
187  outline: 1px solid var(--fg);
188}
189input[type=file] {
190  display: none;
191}
192
193.glow {
194  box-shadow: 0px 0px 16px var(--hl);
195}
196
197.honk {
198  margin: auto;
199  background: var(--bg-dark);
200  border: 0px solid var(--hl);
201  margin-bottom: 1em;
202  border-radius: 0em !important;
203  padding-left: 1em;
204  padding-right: 1em;
205  padding-top: 0;
206  overflow: hidden;
207}
208
209.chat {
210  border-bottom: 0.5px solid var(--fg-subtle);
211  padding-left: 1em;
212}
213.chat p {
214  margin-top: 0.2em;
215  margin-bottom: 0.2em;
216}
217.chattarget {
218  border-bottom: 1px solid var(--fg-subtle);
219}
220.chatstamp {
221  margin-left: -1em;
222}
223
224.honk #honkform {
225  padding: 1em;
226  border: 1px solid var(--fg);
227}
228.honk a {
229  color: var(--fg);
230}
231.honk header {
232  white-space: nowrap;
233  overflow: hidden;
234  text-overflow: ellipsis;
235  font-size: 0.8em;
236  line-height: 1.1;
237  margin-top: 1em;
238  height: 64px;
239}
240
241.honk header  .clip a {
242  color: var(--fg-subtle);
243}
244
245.clip {
246  text-transform: lowercase;
247}
248
249.honk header  img {
250  float: left;
251  margin-right: 1em;
252  width: 64px;
253  height: 64px;
254}
255.honk header  p {
256  margin-top: 0px;
257}
258.honk .actions button {
259  margin-left: 4em;
260  margin-top: 2em;
261}
262.honk .noise {
263  line-height: 1.4;
264}
265
266.honk .noise  code .kw { font-weight: bold; }
267.honk .noise  code .bi { font-weight: bold; }
268.honk .noise  code .st { color: var(--fg-subtle); }
269.honk .noise  code .nm { color: #ba88ff; }
270.honk .noise  code .op { color: #ba88ff; }
271.honk .noise  code .tp { font-weight: bold; }
272.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
273.honk .noise  code .al { color: #aaffbb; }
274.honk .noise  code .dl { color: #ffaabb; }
275
276.honk details.actions summary {
277  color: var(--fg-subtle);
278}
279.subtle .noise {
280  color: var(--fg-subtle);
281  font-size: 0.8em;
282}
283.subtle .noise a {
284  color: var(--fg-subtle);
285}
286.limited {
287  background: var(--bg-limited);
288  border: 0px solid var(--fg-limited);
289  color: var(--fg-subtle);
290}
291.limited  .glow {
292  box-shadow: 0px 0px 16px var(--fg-limited);
293}
294.limited  .noise {
295  color: var(--fg-subtle);
296}
297.limited  .noise a {
298  color: var(--fg-limited);
299}
300.limited  details.actions summary {
301  color: var(--fg-limited);
302}
303details.noise[open] summary {
304  display: none;
305}
306h1, h2 {
307  font-size: 1.2em;
308}
309h3, h4 {
310  font-size: 1.1em;
311}
312
313#topmenu ul {
314  list-style: none;
315  padding-left: 1em;
316}
317
318nav {
319  float: right;
320}
321
322nav ul {
323  padding: 0;
324  margin: 0;
325  list-style: none;
326  padding-bottom: 20px;
327}
328
329nav ul li {
330  padding-right: 10px;
331  display: inline-block;
332}
333
334img:not(.emu) {
335  background: var(--bg-page);
336}
337img, video {
338  max-width: 100%;
339  max-height: 600px;
340}
341.noise img:not(.emu) {
342  display: block;
343}
344img.emu {
345  width: 2em;
346  height: 2em;
347  vertical-align: middle;
348  margin: -2px;
349  object-fit: contain;
350}
351.nophone {
352  position: fixed;
353  opacity: 0.7;
354  cursor: pointer;
355}
356@media screen and (max-width: 1360px) {
357  .nophone {
358    display: none;
359  }
360}
361@media screen and (max-width: 740px) {
362  body {
363    font-size: 12px;
364  }
365  .honk header {
366    height: 52px;
367  }
368  .honk header img {
369    width: 48px;
370    height: 48px;
371  }
372  details summary {
373    outline: none;
374  }
375}
376@media print {
377  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
378    display: none;
379  }
380  html {
381    --bg-page: white;
382    --bg-dark: white;
383    --fg: black;
384    --fg-subtle: black;
385    --fg-limited: #a79;
386  }
387}