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: 655px;
 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: 655px;
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(--bg-dark);
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: 14px;
139  font-family: -apple-system, sans-serif;
140  color: var(--fg);
141  padding: 0.2em;
142  background: var(--bg-dark);
143  white-space: nowrap;
144}
145
146button:hover {
147  background: var(--hl);
148}
149
150.buttonarray {
151  margin-top: -2.0em;
152}
153.buttonarray button, .buttonarray > span {
154  margin-top: 2.0em;
155  display: inline-block;
156}
157button a {
158  text-decoration: none;
159}
160button {
161  cursor: pointer;
162}
163form {
164  margin-top: 1em;
165}
166textarea {
167  padding: 0.5em;
168  font-size: 1em;
169  background: var(--bg-page);
170  color: var(--fg);
171  width: 600px;
172  height: 4em;
173  margin-bottom: 0.5em;
174  box-sizing: border-box;
175  max-width: 100%;
176}
177textarea#honknoise {
178  height: 10em;
179}
180input[type="checkbox"] {
181  position: fixed;
182  top: -9999px;
183}
184input[type="checkbox"] + span:after {
185  content: "no";
186}
187input[type="checkbox"]:checked + span:after {
188  content: "yes";
189}
190input[type="checkbox"]:focus + span:after {
191  outline: 1px solid var(--fg);
192}
193input[type=file] {
194  display: none;
195}
196
197.glow {
198  box-shadow: 0px 0px 16px var(--hl);
199}
200
201.honk {
202  margin: auto;
203  background: var(--bg-dark);
204  border: 0px solid var(--hl);
205  margin-bottom: 1em;
206  border-radius: 0em !important;
207  padding-left: 1em;
208  padding-right: 1em;
209  padding-top: 0;
210  overflow: hidden;
211}
212
213.chat {
214  border-bottom: 0.5px solid var(--fg-subtle);
215  padding-left: 1em;
216}
217.chat p {
218  margin-top: 0.2em;
219  margin-bottom: 0.2em;
220}
221.chattarget {
222  border-bottom: 1px solid var(--fg-subtle);
223}
224.chatstamp {
225  margin-left: -1em;
226}
227
228.honk #honkform {
229  padding: 1em;
230  border: 1px solid var(--fg);
231}
232.honk a {
233  color: var(--fg);
234}
235.honk header {
236  white-space: nowrap;
237  overflow: hidden;
238  text-overflow: ellipsis;
239  font-size: 0.8em;
240  line-height: 1.1;
241  margin-top: 1em;
242}
243
244.honk header  .clip a {
245  color: var(--fg-subtle);
246}
247
248.clip {
249  text-transform: lowercase;
250}
251
252.honk header img {
253  float: left;
254  margin-right: 1em;
255  border-radius: 10%;
256  width: 64px;
257  height: 64px;
258}
259.honk header  p {
260  margin-top: 0px;
261}
262
263.honk .noise {
264  line-height: 1.4;
265}
266
267.honk .noise  code .kw { font-weight: bold; }
268.honk .noise  code .bi { font-weight: bold; }
269.honk .noise  code .st { color: var(--fg-subtle); }
270.honk .noise  code .nm { color: #ba88ff; }
271.honk .noise  code .op { color: #ba88ff; }
272.honk .noise  code .tp { font-weight: bold; }
273.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
274.honk .noise  code .al { color: #aaffbb; }
275.honk .noise  code .dl { color: #ffaabb; }
276
277.honk details.actions summary {
278  color: var(--fg-subtle);
279}
280.subtle .noise {
281  color: var(--fg-subtle);
282  font-size: 0.8em;
283}
284.subtle .noise a {
285  color: var(--fg-subtle);
286}
287.limited {
288  background: var(--bg-limited);
289  border: 0px solid var(--fg-limited);
290  color: var(--fg-subtle);
291}
292.limited  .glow {
293  box-shadow: 0px 0px 16px var(--fg-limited);
294}
295.limited  .noise {
296  color: var(--fg-subtle);
297}
298.limited  .noise a {
299  color: var(--fg-limited);
300}
301.limited  details.actions summary {
302  color: var(--fg-limited);
303}
304details.noise[open] summary {
305  display: none;
306}
307h1, h2 {
308  font-size: 1.2em;
309}
310h3, h4 {
311  font-size: 1.1em;
312}
313
314#topmenu ul {
315  list-style: none;
316  padding-left: 1em;
317}
318
319.honkmeta {
320  display: inline;
321  padding: 0;
322  margin: 0;
323  list-style: none;
324}
325
326.honkmeta li:before {
327  content: '\00B7';
328  padding-right: 5px;
329}
330
331.honkmeta li:last-child:before {
332  content: '';
333}
334
335.honkmeta li {
336  float: right;
337  padding-right: 10px;
338  display: inline-block;
339}
340
341nav {
342  float: right;
343}
344
345nav ul {
346  padding: 0;
347  margin: 0;
348  list-style: none;
349  padding-bottom: 20px;
350}
351
352nav ul li {
353  padding-right: 10px;
354  display: inline-block;
355}
356
357img:not(.emu) {
358  background: var(--bg-page);
359}
360img, video {
361  max-width: 100%;
362  max-height: 600px;
363}
364.noise img:not(.emu) {
365  display: block;
366}
367img.emu {
368  width: 2em;
369  height: 2em;
370  vertical-align: middle;
371  margin: -2px;
372  object-fit: contain;
373}
374.nophone {
375  position: fixed;
376  opacity: 0.7;
377  cursor: pointer;
378}
379@media screen and (max-width: 1360px) {
380  .nophone {
381    display: none;
382  }
383}
384@media screen and (max-width: 740px) {
385  body {
386    font-size: 12px;
387  }
388
389  .honk header img {
390    width: 48px;
391    height: 48px;
392    border-radius: 10%;
393  }
394  details summary {
395    outline: none;
396  }
397}
398@media print {
399  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
400    display: none;
401  }
402  html {
403    --bg-page: white;
404    --bg-dark: white;
405    --fg: black;
406    --fg-subtle: black;
407    --fg-limited: #a79;
408  }
409}