:root {
  --bg-page: #f4f4f4;
  --bg-dark: #ccc;
  --bg-limited: #e4e4e4;
  --hover: #ddd;
  --fg: #222;
  --fg-subtle: #6a6a6a;
  --fg-limited: #777;
  --hl: #ddd;
  --header: #f4f4f4;
  --header-fg: var(--fg);
}

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

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

* {
  font-size: 1rem !important;
}
@media (prefers-color-scheme: dark) {
.noise img:not(.emu) {
	opacity: .5;
	transition: opacity .5s ease-in-out;
}
.noise img:not(.emu):hover {
	opacity: 1;
}
}
@media (prefers-color-scheme: dark) {
.noise img:not(.emu) {
	opacity: .5;
	transition: opacity .5s ease-in-out;
}
.noise img:not(.emu):hover {
	opacity: 1;
}
}

body {
  padding: 0px;
  margin: 0px;
  background: var(--bg-page);
  color: var(--fg);
  font-size: 1rem !important;
  word-wrap: break-word;
  font-family: "InterVar", -apple-system, sans-serif, "Noto Color Emoji";
  line-height: 1.2;
  overscroll-behavior-y: contain;
  overflow: overlay;
}
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:  "InterVar", -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;
  border: 1px solid var(--hl);
}
#honkform input {
  font-size: 0.8em;
}
body > header {
  background: var(--header);
  max-width: 100%;
  max-height: 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: absolute;
  top: 0;
  left: 0;
  display: inline;
  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;
  margin-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}
.info div {
  margin-top: 1em;
  margin-bottom: 1em;
}
label {
  font-size: 0.8em;
}
label.button, button, select {
  border: none;
  font-size: 1rem;
  font-family:  "InterVar", -apple-system, sans-serif, "Noto Color Emoji";
  color: var(--fg);
  padding: 0.2em;
  background: var(--bg-dark);
  white-space: nowrap;
}

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

.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: 100%;
  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(--hl);
}
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: 0.3em;
  padding-right: 0.3em;
  padding-top: 0.7em;
  overflow: hidden;

}

.honk {
  max-height: 120vh;
  overflow-y: auto;
}

.level1 {
  padding-left: 1em;
  padding-right: 1em;
	margin-left: 0.7em;
  border-left: 1px solid var(--hl);
}


.level2 {
  padding-left: 1em;
  padding-right: 1em;
	margin-left: 1.4em;
  border-left: 1px solid var(--hl);
}

.level3 {
  padding-left: 1em;
  padding-right: 1em;
	margin-left: 2.1em;
  border-left: 1px solid var(--hl);
}

.level4 {
  padding-left: 1em;
  padding-right: 1em;
	margin-left: 2.8em;
  border-left: 1px solid var(--hl);
}

.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(--hl);
}
.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; }

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

details > summary:after {
  content: ' \2192'
}

details[open] > summary:after {
  content: ' \2193';
}

.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);
  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.noise {
  display: none;
}
h1, h2 {
  font-family: "InterDisplay", sans-serif;
  font-weight: 500;
  font-size: 1.6em;
}
h3, h4 {
  font-family: "InterDisplay", sans-serif;
  font-weight: 500;
  font-size: 1.1em;
}

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

header a {
  text-decoration: none;
  color: var(--header-fg);
}

main header a {
  text-decoration: underline;
}

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

.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%;
	object-fit: scale-down;
	width: auto;
	height: auto;
}
.noise img:not(.emu) {
  display: block;
}
.noise img.donk {
	max-height: 400px;
	max-width: 48%;
	display: inline;
}
.noise img.donk {
	max-height: 400px;
	max-width: 48%;
	display: inline;
}
img.emu {
	height: 2em;
	vertical-align: middle;
}
.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(--hover);
}



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

  .info {
    border: none;
    margin-top: 0px;
    padding-left: 1em;
    padding-right: 1em;
  }

  .honk {
    padding-left: 1em;
    padding-right: 1em;
  }

  .honk header img {
    width: 48px;
    height: 48px;
    border-radius: 10%;
  }
  details summary {
    outline: none;
  }

  .actions > div {
    float: right;
  }
}
@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;
}

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

.font08em {
	font-size: 0.8em;
}

.font18em {
	font-size: 1.8em;
}

.wsnowrap {
	white-space: nowrap;
}

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

.fontmonospace {
	font-family: monospace;
}

#searchbox {
  width: 95%;
}

#mecount {
  border-radius: 50%;
  text-align: center;
  color: var(--darker);
  background: var(--bg-dark);
  display: inline-block;
  margin-left: 5px;
  box-sizing: content-box;
}