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