1:root {
  2  --bg-page: #f4f4f4;
  3  --bg-dark: #ccc;
  4  --bg-limited: #e4e4e4;
  5  --hover: #ddd;
  6  --fg: #222;
  7  --fg-subtle: #6a6a6a;
  8  --fg-limited: #777;
  9  --hl: #ddd;
 10  --header: #f4f4f4;
 11  --header-fg: var(--fg);
 12}
 13
 14::selection {
 15  background: var(--fg-limited);
 16  color: white;
 17}
 18
 19@media (prefers-color-scheme: dark) {
 20  :root {
 21    --bg-page: #111;
 22    --bg-dark: #222;
 23    --fg: #ccc;
 24    --hl: #444;
 25    --fg-subtle: #ccc;
 26    --fg-limited: #509c93;
 27    --bg-limited: #333;
 28    --header: #509c93;
 29    --header-fg: #111;
 30    --hover: (--bg-limited);
 31  }
 32}
 33
 34* {
 35  font-size: 1rem !important;
 36}
 37@media (prefers-color-scheme: dark) {
 38.noise img:not(.emu) {
 39	opacity: .5;
 40	transition: opacity .5s ease-in-out;
 41}
 42.noise img:not(.emu):hover {
 43	opacity: 1;
 44}
 45}
 46
 47body {
 48  padding: 0px;
 49  margin: 0px;
 50  background: var(--bg-page);
 51  color: var(--fg);
 52  font-size: 1rem !important;
 53  word-wrap: break-word;
 54  font-family: "InterVar", -apple-system, sans-serif, "Noto Color Emoji";
 55  line-height: 1.2;
 56  overscroll-behavior-y: contain;
 57  overflow: overlay;
 58}
 59pre, code {
 60  white-space: pre-wrap;
 61}
 62blockquote {
 63  margin-left: 0em;
 64  margin-bottom: 0em;
 65  padding-left: 0.5em;
 66  border-left: 1px solid var(--fg-subtle);
 67}
 68cite {
 69  margin-left: 2em;
 70}
 71table {
 72  display: block;
 73  max-width: 100%;
 74  overflow-x: auto;
 75}
 76
 77form, input, textarea {
 78  font-family:  "InterVar", -apple-system, sans-serif, "Noto Color Emoji";
 79}
 80p {
 81  margin-top: 1em;
 82  margin-bottom: 1em;
 83}
 84input {
 85  background: var(--bg-page);
 86  color: var(--fg);
 87  font-size: 1.0em;
 88  line-height: 1.2em;
 89  padding: 0.4em;
 90  border: 1px solid var(--hl);
 91}
 92#honkform input {
 93  font-size: 0.8em;
 94}
 95body > header {
 96  background: var(--header);
 97  max-width: 100%;
 98  max-height: 100%;
 99  margin: 0px;
100  padding: 1em 0em 2em 0em;
101  font-size: 1.5em;
102  color: var(--header-fg);
103}
104body > header span {
105  margin-left: 2em;
106}
107
108.easylinks a {
109  text-decoration: none !important;
110  color: var(--header-fg);
111}
112
113header > details {
114  padding: 1em 1em 1em 1em;
115  color: var(--header-fg);
116  position: absolute;
117  top: 0;
118  left: 0;
119  display: inline;
120  overflow: auto;
121  opacity: 1;
122  overscroll-behavior: contain;
123  z-index: 2;
124}
125header > details[open] {
126  color: var(--fg);
127  padding: 1em 1em 0em 1em;
128  background: var(--bg-dark);
129  margin-bottom: 1em;
130  opacity: 1.0;
131}
132header > details summary span {
133  display: none;
134}
135header > details[open] summary span {
136  display: inline;
137}
138header > details li {
139  margin: 1em 0em 1em 0em;
140}
141details summary {
142  cursor: pointer;
143}
144main {
145  max-width: 655px;
146  margin: auto;
147  font-size: 1.5em;
148}
149hr {
150  border-color: var(--hl);
151}
152.info {
153  background: var(--bg-page);
154  border: 1px solid var(--hl);
155  margin-bottom: 1em;
156  margin-top: 1em;
157}
158.info div {
159  padding-left: 1em;
160  padding-right: 1em;
161  margin-top: 1em;
162  margin-bottom: 1em;
163}
164label {
165  font-size: 0.8em;
166}
167label.button, button, select {
168  border: none;
169  font-size: 1rem;
170  font-family:  "InterVar", -apple-system, sans-serif, "Noto Color Emoji";
171  color: var(--fg);
172  padding: 0.2em;
173  background: var(--bg-dark);
174  white-space: nowrap;
175}
176
177button:hover {
178  background: var(--hover);
179}
180
181.buttonarray {
182  margin-top: -2.0em;
183}
184.buttonarray button, .buttonarray > span {
185  margin-top: 2.0em;
186  display: inline-block;
187}
188button a {
189  text-decoration: none;
190}
191button {
192  cursor: pointer;
193}
194form {
195  margin-top: 1em;
196}
197textarea {
198  border: 1px solid var(--hl);
199  padding: 0.5em;
200  font-size: 1em;
201  background: var(--bg-page);
202  color: var(--fg);
203  width: 100%;
204  height: 4em;
205  margin-bottom: 0.5em;
206  box-sizing: border-box;
207  max-width: 100%;
208}
209textarea#honknoise {
210  height: 10em;
211}
212input[type="checkbox"] {
213  position: fixed;
214  top: -9999px;
215}
216input[type="checkbox"] + span:after {
217  content: "no";
218}
219input[type="checkbox"]:checked + span:after {
220  content: "yes";
221}
222input[type="checkbox"]:focus + span:after {
223  outline: 1px solid var(--hl);
224}
225input[type=file] {
226  display: none;
227}
228
229.glow {
230  box-shadow: 0px 0px 16px var(--hl);
231}
232.honk {
233  margin: auto;
234  background: var(--bg-page);
235  /*border-top: 1px solid var(--hl);
236  border-left: 1px solid var(--hl);
237  border-right: 1px solid var(--hl);*/
238  padding-left: 0.3em;
239  padding-right: 0.3em;
240  padding-top: 0.7em;
241  overflow: hidden;
242}
243
244.level1 {
245  padding-left: 1em;
246  padding-right: 1em;
247	margin-left: 0.7em;
248  border-left: 1px solid var(--hl);
249}
250
251
252.level2 {
253  padding-left: 1em;
254  padding-right: 1em;
255	margin-left: 1.4em;
256  border-left: 1px solid var(--hl);
257}
258
259.level3 {
260  padding-left: 1em;
261  padding-right: 1em;
262	margin-left: 2.1em;
263  border-left: 1px solid var(--hl);
264}
265
266.level4 {
267  padding-left: 1em;
268  padding-right: 1em;
269	margin-left: 2.8em;
270  border-left: 1px solid var(--hl);
271}
272
273.chat {
274  border-bottom: 0.5px solid var(--fg-subtle);
275  padding-left: 1em;
276}
277.chat p {
278  margin-top: 0.2em;
279  margin-bottom: 0.2em;
280}
281.chattarget {
282  border-bottom: 1px solid var(--fg-subtle);
283}
284.chatstamp {
285  margin-left: -1em;
286}
287
288.honk #honkform {
289  padding: 1em;
290  border: 1px solid var(--hl);
291}
292.honk a {
293  color: var(--fg);
294}
295.honk header {
296  white-space: nowrap;
297  overflow: hidden;
298  text-overflow: ellipsis;
299  font-size: 0.8em;
300  line-height: 1.1;
301  margin-top: 1em;
302}
303
304.honk header  .clip a {
305  color: var(--fg-subtle);
306}
307
308.clip {
309  text-transform: lowercase;
310}
311
312.honk header img {
313  float: left;
314  margin-right: 1em;
315  border-radius: 10%;
316  width: 64px;
317  height: 64px;
318}
319.honk header  p {
320  margin-top: 0px;
321}
322
323.honk .noise {
324  line-height: 1.4;
325}
326
327.honk .noise  code .kw { font-weight: bold; }
328.honk .noise  code .bi { font-weight: bold; }
329.honk .noise  code .st { color: var(--fg-subtle); }
330.honk .noise  code .nm { color: #ba88ff; }
331.honk .noise  code .op { color: #ba88ff; }
332.honk .noise  code .tp { font-weight: bold; }
333.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
334.honk .noise  code .al { color: #aaffbb; }
335.honk .noise  code .dl { color: #ffaabb; }
336
337details > summary {
338  list-style: none;
339}
340details > summary::-webkit-details-marker {
341  display: none;
342}
343
344details > summary:after {
345  content: ' \2192'
346}
347
348details[open] > summary:after {
349  content: ' \2193';
350}
351
352.honk details.actions summary {
353  color: var(--fg-subtle);
354}
355
356#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
357#emupicker img{margin:0;}
358.emuload{background:var(--bg-page);padding:0.5em;}
359
360.subtle .noise {
361  color: var(--fg-subtle);
362  font-size: 0.8em;
363}
364.subtle .noise a {
365  color: var(--fg-subtle);
366}
367.limited {
368  background: var(--bg-limited);
369  color: var(--fg-subtle);
370}
371.limited  .glow {
372  box-shadow: 0px 0px 16px var(--fg-limited);
373}
374.limited  .noise {
375  color: var(--fg-subtle);
376}
377.limited  .noise a {
378  color: var(--fg-limited);
379}
380.limited  details.actions summary {
381  color: var(--fg-limited);
382}
383details.noise[open] summary.noise {
384  display: none;
385}
386h1, h2 {
387  font-family: "InterDisplay", sans-serif;
388  font-weight: 500;
389  font-size: 1.6em;
390}
391h3, h4 {
392  font-family: "InterDisplay", sans-serif;
393  font-weight: 500;
394  font-size: 1.1em;
395}
396
397#topmenu ul {
398  list-style: none;
399  padding-left: 1em;
400}
401
402header a {
403  text-decoration: none;
404  color: var(--header-fg);
405}
406
407main header a {
408  text-decoration: underline;
409}
410
411header details a {
412  color: var(--fg);
413}
414
415.honkmeta {
416  color: var(--fg-subtle);
417  float: right;
418  display: inline-flex;
419  padding: 0;
420  margin: 0;
421  list-style: none;
422}
423
424.honkmeta a {
425  color: var(--fg-subtle);
426}
427
428.honkmeta li:after {
429  content: '\00B7';
430  padding-right: 2px;
431  padding-left: 2px;
432}
433
434.honkmeta li:last-child:after {
435  content: '';
436}
437
438.honkmeta li {
439  padding-left: 2px;
440  display: inline-block;
441}
442
443nav {
444  float: right;
445  max-width: 100%;
446}
447
448nav ul {
449  padding: 0;
450  margin: 0;
451  list-style: none;
452  padding-bottom: 20px;
453}
454
455nav ul li {
456  padding-right: 10px;
457  display: inline-block;
458}
459
460img:not(.emu) {
461  background: var(--bg-page);
462}
463img, video {
464  max-width: 100%;
465  max-height: 600px;
466}
467.noise img:not(.emu) {
468  display: block;
469}
470.noise img.donk {
471	max-height: 400px;
472	max-width: 48%;
473	display: inline;
474}
475img.emu {
476  height: 2em;
477  vertical-align: middle;
478  object-fit: contain;
479}
480.nophone {
481  position: fixed;
482  opacity: 0.7;
483  cursor: pointer;
484}
485
486#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
487#emupicker img{margin:0;}
488
489a {
490  color: var(--fg);
491}
492
493a:hover {
494  background: var(--hover);
495}
496
497
498
499@media screen and (max-width: 1360px) {
500  .nophone {
501    display: none;
502  }
503}
504@media screen and (max-width: 740px) {
505  body {
506    font-size: 12px;
507  }
508
509  .info {
510    border: none;
511    margin-top: 0px;
512  }
513
514
515  .honk header img {
516    width: 48px;
517    height: 48px;
518    border-radius: 10%;
519  }
520  details summary {
521    outline: none;
522  }
523
524  .actions > div {
525    float: right;
526  }
527}
528@media print {
529  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
530    display: none;
531  }
532  html {
533    --bg-page: white;
534    --bg-dark: white;
535    --fg: black;
536    --fg-subtle: black;
537    --fg-limited: #a79;
538  }
539}
540
541/*
542 * CSP: style-src: self
543 */
544
545li.details {
546	list-style-type: none;
547	margin-left: -1em;
548}
549
550.left1em {
551	margin-left: 1em;
552}
553
554.hide {
555	display: none;
556}
557
558.text-left {
559	text-align: left;
560}
561.text-right {
562	text-align: right;
563}
564.text-center {
565	text-align: center;
566}
567
568.font08em {
569	font-size: 0.8em;
570}
571
572.font18em {
573	font-size: 1.8em;
574}
575
576.wsnowrap {
577	white-space: nowrap;
578}
579
580.skinny main {
581	max-width: 700px;
582}
583
584.fontmonospace {
585	font-family: monospace;
586}
587
588#searchbox {
589  width: 95%;
590}
591
592#mecount {
593  border-radius: 50%;
594  text-align: center;
595  color: var(--darker);
596  background: var(--bg-dark);
597  display: inline-block;
598  margin-left: 5px;
599  box-sizing: content-box;
600}