:root {
  --bg-page: #f4f4f4;
  --bg-dark: #eee;
  --bg-limited: #ddd;
  --fg: #000;
  --fg-subtle: #666;
  --fg-limited: #509c93;
  --hl: #c2c2c2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #111;
    --bg-dark: #222;
    --fg: #ccc;
    --hl: #333;
    --fg-subtle: #ccc;
    --fg-limited: #509c93;
    --bg-limited: #333;
  }
}

* {
  font-size: 14px !important;
}

body {
  background: var(--bg-page);
  color: var(--fg);
  font-size: 14px !important;
  word-wrap: break-word;
  font-family: -apple-system, sans-serif, "Noto Color Emoji";
  line-height: 1.2;
  overscroll-behavior-y: contain;
}
pre, code {
  white-space: pre-wrap;
}
blockquote {
  margin-left: 0em;
  margin-bottom: 0em;
  padding-left: 0.5em;
  border-left: 1px solid var(--fg-subtle);
}
cite {
  margin-left: 2em;
}
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
a {
  color: var(--fg);
}

a:hover {
  background: var(--bg-limited);
}

form, input, textarea {
  font-family: -apple-system, sans-serif, "Noto Color Emoji";
}
p {
  margin-top: 1em;
  margin-bottom: 1em;
}
input {
  background: var(--bg-page);
  color: var(--fg);
  font-size: 1.0em;
  line-height: 1.2em;
  padding: 0.4em;
}
#honkform input {
  font-size: 0.8em;
}
body > header {
  max-width: 655px;
  margin: 1em auto;
  font-size: 1.5em;
}
body > header span {
  margin-left: 2em;
}
body > header p {
  padding: 1em;
}
header > details {
  background: var(--bg-page);
  padding: 1em 1em 1em 1em;
  position: fixed;
  top: 0;
  left: 0;
  display: inline;
  max-height: calc(100% - 1em);
  overflow: auto;
  opacity: 0.7;
  overscroll-behavior: contain;
  z-index: 2;
}
header > details[open] {
  padding: 1em 1em 0em 1em;
  background: var(--bg-dark);
  border: 1px solid var(--hl);
  margin-bottom: 1em;
  opacity: 1.0;
}
header > details summary span {
  display: none;
}
header > details[open] summary span {
  display: inline;
}
header > details li {
  margin: 1em 0em 1em 0em;
}
details summary {
  cursor: pointer;
}
main {
  max-width: 655px;
  margin: auto;
  font-size: 1.5em;
}
hr {
  border-color: var(--hl);
}
.info {
  background: var(--bg-dark);
  border: 1px solid var(--bg-dark);
  margin-bottom: 1em;
  padding: 0em 1em 0em 1em;
}
.info div {
  margin-top: 1em;
  margin-bottom: 1em;
}
label {
  font-size: 0.8em;
}
label.button, button, select {
  font-size: 14px;
  font-family: -apple-system, sans-serif;
  color: var(--fg);
  padding: 0.2em;
  background: var(--bg-dark);
  white-space: nowrap;
}

button:hover {
  background: var(--hl);
}

.buttonarray {
  margin-top: -2.0em;
}
.buttonarray button, .buttonarray > span {
  margin-top: 2.0em;
  display: inline-block;
}
button a {
  text-decoration: none;
}
button {
  cursor: pointer;
}
form {
  margin-top: 1em;
}
textarea {
  padding: 0.5em;
  font-size: 1em;
  background: var(--bg-page);
  color: var(--fg);
  width: 600px;
  height: 4em;
  margin-bottom: 0.5em;
  box-sizing: border-box;
  max-width: 100%;
}
textarea#honknoise {
  height: 10em;
}
input[type="checkbox"] {
  position: fixed;
  top: -9999px;
}
input[type="checkbox"] + span:after {
  content: "no";
}
input[type="checkbox"]:checked + span:after {
  content: "yes";
}
input[type="checkbox"]:focus + span:after {
  outline: 1px solid var(--fg);
}
input[type=file] {
  display: none;
}

.glow {
  box-shadow: 0px 0px 16px var(--hl);
}

.honk {
  margin: auto;
  background: var(--bg-dark);
  border: 0px solid var(--hl);
  margin-bottom: 1em;
  border-radius: 0em !important;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0;
  overflow: hidden;
}

.chat {
  border-bottom: 0.5px solid var(--fg-subtle);
  padding-left: 1em;
}
.chat p {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.chattarget {
  border-bottom: 1px solid var(--fg-subtle);
}
.chatstamp {
  margin-left: -1em;
}

.honk #honkform {
  padding: 1em;
  border: 1px solid var(--fg);
}
.honk a {
  color: var(--fg);
}
.honk header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8em;
  line-height: 1.1;
  margin-top: 1em;
}

.honk header  .clip a {
  color: var(--fg-subtle);
}

.clip {
  text-transform: lowercase;
}

.honk header img {
  float: left;
  margin-right: 1em;
  border-radius: 10%;
  width: 64px;
  height: 64px;
}
.honk header  p {
  margin-top: 0px;
}

.honk .noise {
  line-height: 1.4;
}

.honk .noise  code .kw { font-weight: bold; }
.honk .noise  code .bi { font-weight: bold; }
.honk .noise  code .st { color: var(--fg-subtle); }
.honk .noise  code .nm { color: #ba88ff; }
.honk .noise  code .op { color: #ba88ff; }
.honk .noise  code .tp { font-weight: bold; }
.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
.honk .noise  code .al { color: #aaffbb; }
.honk .noise  code .dl { color: #ffaabb; }

.honk details.actions summary {
  color: var(--fg-subtle);
}
.subtle .noise {
  color: var(--fg-subtle);
  font-size: 0.8em;
}
.subtle .noise a {
  color: var(--fg-subtle);
}
.limited {
  background: var(--bg-limited);
  border: 0px solid var(--fg-limited);
  color: var(--fg-subtle);
}
.limited  .glow {
  box-shadow: 0px 0px 16px var(--fg-limited);
}
.limited  .noise {
  color: var(--fg-subtle);
}
.limited  .noise a {
  color: var(--fg-limited);
}
.limited  details.actions summary {
  color: var(--fg-limited);
}
details.noise[open] summary {
  display: none;
}
h1, h2 {
  font-size: 1.2em;
}
h3, h4 {
  font-size: 1.1em;
}

#topmenu ul {
  list-style: none;
  padding-left: 1em;
}

.honkmeta {
  display: inline;
  padding: 0;
  margin: 0;
  list-style: none;
}

.honkmeta li:before {
  content: '\00B7';
  padding-right: 2.5px;
}

.honkmeta li:last-child:before {
  content: '';
}

.honkmeta li {
  float: right;
  padding-right: 5px;
  display: inline-block;
}

nav {
  float: right;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  padding-bottom: 20px;
}

nav ul li {
  padding-right: 10px;
  display: inline-block;
}

img:not(.emu) {
  background: var(--bg-page);
}
img, video {
  max-width: 100%;
  max-height: 600px;
}
.noise img:not(.emu) {
  display: block;
}
img.emu {
  width: 2em;
  height: 2em;
  vertical-align: middle;
  margin: -2px;
  object-fit: contain;
}
.nophone {
  position: fixed;
  opacity: 0.7;
  cursor: pointer;
}
@media screen and (max-width: 1360px) {
  .nophone {
    display: none;
  }
}
@media screen and (max-width: 740px) {
  body {
    font-size: 12px;
  }

  .honk header img {
    width: 48px;
    height: 48px;
    border-radius: 10%;
  }
  details summary {
    outline: none;
  }
}
@media print {
  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
    display: none;
  }
  html {
    --bg-page: white;
    --bg-dark: white;
    --fg: black;
    --fg-subtle: black;
    --fg-limited: #a79;
  }
}