:root {
  --bg-page: #F5EFFF;
  --bg-dark: #6BD2F2;
  --bg-limited: #4CC9F0;
  --fg: #02013C;
  --fg-subtle: #3A0CA3;
  --fg-limited: #F72585;
  --hl: #4361EE;
  --header: #F72585;
  --header-fg: var(--bg-page);
}

::selection {
  background: var(--fg-limited);
  color: white;
}

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

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

body {
  padding: 0px;
  margin: 0px;
  background: var(--bg-page);
  color: var(--fg);
  font-size: 14px !important;
  word-wrap: break-word;
  font-family: -apple-system, "Inter", 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;
}

form, input, textarea {
  font-family: -apple-system, "Inter", 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;
  border: 1px solid var(--hl);
}
#honkform input {
  font-size: 0.8em;
}
body > header {
  background: var(--header);
  max-width: 100%;
  margin: 0px;
  padding: 1em 0em 2em 0em;
  font-size: 1.5em;
  color: var(--header-fg);
}
body > header span {
  margin-left: 2em;
}

.easylinks a {
  text-decoration: none !important;
  color: var(--header-fg);
}

header > details {
  padding: 1em 1em 1em 1em;
  color: var(--header-fg);
  position: fixed;
  top: 0;
  left: 0;
  display: inline;
  max-height: calc(100% - 1em);
  overflow: auto;
  opacity: 1;
  overscroll-behavior: contain;
  z-index: 2;
}
header > details[open] {
  color: var(--fg);
  padding: 1em 1em 0em 1em;
  background: var(--bg-dark);
  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-page);
  border: 1px solid var(--hl);
  margin-bottom: 1em;
  padding: 0em 1em 0em 1em;
  margin-top: 1em;
}
.info div {
  margin-top: 1em;
  margin-bottom: 1em;
}
label {
  font-size: 0.8em;
}
label.button, button, select {
  border: none;
  font-size: 14px;
  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
  color: var(--fg);
  padding: 0.2em;
  background: var(--bg-dark);
  white-space: nowrap;
}

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

.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 {
  border: 1px solid var(--hl);
  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-page);
  border-top: 1px solid var(--hl);
  border-left: 1px solid var(--hl);
  border-right: 1px solid var(--hl);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0;
  overflow: hidden;
}

.level1 {
	margin-left: 0.5em;
}
.level1::before {
	position: absolute;
	content: ">";
}
.level2 {
	margin-left: 1.0em;
}
.level2::before {
	position: absolute;
	content: ">>";
}
.level3 {
	margin-left: 1.5em;
}
.level3::before {
	position: absolute;
	content: ">>>";
}
.level4 {
	margin-left: 2.0em;
}
.level4::before {
	position: absolute;
	content: ">>>>";
}

.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; }

summary::marker {
  content: '\2192';
}

.honk details.actions summary {
  color: var(--fg-subtle);
}

#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
#emupicker img{margin:0;}
.emuload{background:var(--bg-page);padding:0.5em;}

.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 {
  color: var(--fg-subtle);
  float: right;
  display: inline-flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.honkmeta a {
  color: var(--fg-subtle);
}

.honkmeta li:after {
  content: '\00B7';
  padding-right: 2px;
  padding-left: 2px;
}

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

.honkmeta li {
  padding-left: 2px;
  display: inline-block;
}

nav {
  float: right;
  max-width: 100%;
}

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;
}

#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
#emupicker img{margin:0;}

a {
  color: var(--fg);
}

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



@media screen and (max-width: 1360px) {
  .nophone {
    display: none;
  }
}
@media screen and (max-width: 740px) {
  body {
    font-size: 12px;
  }

  main {
    margin: 0 -0.6rem;
  }

  .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;
  }
}

/*
 * CSP: style-src: self
 */

li.details {
	list-style-type: none;
	margin-left: -1em;
}

.left1em {
	margin-left: 1em;
}

.hide {
	display: none;
}

.textright {
	text-align: right;
}

.font08em {
	font-size: 0.8em;
}

.font18em {
	font-size: 1.8em;
}

.wsnowrap {
	white-space: nowrap;
}

.skinny main {
	max-width: 700px;
}

.fontmonospace {
	font-family: monospace;
}