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.5em;
142  background: #ddd;
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  height: 64px;
243}
244
245.honk header  .clip a {
246  color: var(--fg-subtle);
247}
248
249.clip {
250  text-transform: lowercase;
251}
252
253.honk header img {
254  float: left;
255  margin-right: 1em;
256  border-radius: 10%;
257  width: 64px;
258  height: 64px;
259}
260.honk header  p {
261  margin-top: 0px;
262}
263.honk .actions button {
264  margin-left: 4em;
265  margin-top: 2em;
266}
267.honk .noise {
268  line-height: 1.4;
269}
270
271.honk .noise  code .kw { font-weight: bold; }
272.honk .noise  code .bi { font-weight: bold; }
273.honk .noise  code .st { color: var(--fg-subtle); }
274.honk .noise  code .nm { color: #ba88ff; }
275.honk .noise  code .op { color: #ba88ff; }
276.honk .noise  code .tp { font-weight: bold; }
277.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
278.honk .noise  code .al { color: #aaffbb; }
279.honk .noise  code .dl { color: #ffaabb; }
280
281.honk details.actions summary {
282  color: var(--fg-subtle);
283}
284.subtle .noise {
285  color: var(--fg-subtle);
286  font-size: 0.8em;
287}
288.subtle .noise a {
289  color: var(--fg-subtle);
290}
291.limited {
292  background: var(--bg-limited);
293  border: 0px solid var(--fg-limited);
294  color: var(--fg-subtle);
295}
296.limited  .glow {
297  box-shadow: 0px 0px 16px var(--fg-limited);
298}
299.limited  .noise {
300  color: var(--fg-subtle);
301}
302.limited  .noise a {
303  color: var(--fg-limited);
304}
305.limited  details.actions summary {
306  color: var(--fg-limited);
307}
308details.noise[open] summary {
309  display: none;
310}
311h1, h2 {
312  font-size: 1.2em;
313}
314h3, h4 {
315  font-size: 1.1em;
316}
317
318#topmenu ul {
319  list-style: none;
320  padding-left: 1em;
321}
322
323nav {
324  float: right;
325}
326
327nav ul {
328  padding: 0;
329  margin: 0;
330  list-style: none;
331  padding-bottom: 20px;
332}
333
334nav ul li {
335  padding-right: 10px;
336  display: inline-block;
337}
338
339img:not(.emu) {
340  background: var(--bg-page);
341}
342img, video {
343  max-width: 100%;
344  max-height: 600px;
345}
346.noise img:not(.emu) {
347  display: block;
348}
349img.emu {
350  width: 2em;
351  height: 2em;
352  vertical-align: middle;
353  margin: -2px;
354  object-fit: contain;
355}
356.nophone {
357  position: fixed;
358  opacity: 0.7;
359  cursor: pointer;
360}
361@media screen and (max-width: 1360px) {
362  .nophone {
363    display: none;
364  }
365}
366@media screen and (max-width: 740px) {
367  body {
368    font-size: 12px;
369  }
370  .honk header {
371    height: 52px;
372  }
373  .honk header img {
374    width: 48px;
375    height: 48px;
376    border-radius: 10%;
377  }
378  details summary {
379    outline: none;
380  }
381}
382@media print {
383  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
384    display: none;
385  }
386  html {
387    --bg-page: white;
388    --bg-dark: white;
389    --fg: black;
390    --fg-subtle: black;
391    --fg-limited: #a79;
392  }
393}