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