:root {
	--normal-black: #282828;
	--normal-red: #d65d0e;
	--normal-yellow: #d79921;
	--normal-green: #98971a;
	--normal-blue: #458588;
	--normal-magenta: #b16286;
	--normal-cyan: #689d6a;
	--normal-white: #d5c4a1;
	--bright-black: #3c3836;
	--bright-red: #fe8019;
	--bright-yellow: #fabd2f;
	--bright-green: #b8bb26;
	--bright-blue: #83a598;
	--bright-magenta: #d3869b;
	--bright-cyan: #8ec07c;
	--bright-white: #ebdbb2;
}

body {
  font-size: 18px;
  background-color: var(--normal-black);
  margin: 3em 3em 3em 3em;
}

body, pre, code {
/*  font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace; */
  font-family: 'Ubuntu Mono', monospace;
}

#main, #header, aside {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

#header {
  height: 3em;
  margin: 0 auto 5em;
}

#header img.sign-logo {
  height: 3em;
  vertical-align: middle;
  margin-top: 0.3em;
/*  margin-bottom: 0.67em; */
}

#header .icon svg {
  color: var(--normal-magenta);
  fill: var(--bright-magenta);
}

#header .icon svg {
  height: 1.7em;
  position: relative;
  top: 0.2em;
}

#header .mastodon-icon svg {
  height: 1.5em;
  color: var(--normal-magenta);
  fill: var(--bright-magenta);
}

#header .rss-icon svg {
  color: var(--normal-magenta);
  fill: var(--bright-magenta);
}

#header span {
  font-weight: 600;
  margin-left: 0.3em;
  font-size: 1.2em;
}

#header ul {
  list-style: none;
  margin: 0.5em 0 1em 0;
  padding: 0;
  float: right;
}

#header ul li {
  font-weight: bold;
  display: inline-block;
  text-transform: uppercase;
  margin-left: 20px;
  vertical-align: middle;
}

#header ul li a {
  text-decoration: none;
  color: var(--bright-green);
}

#header li em a {
  color: var(--bright-black);
  background-color: var(--normal-yellow);
  font-style: normal;
  border-radius: 3px;
  padding: 3px 6px;
}

#header ul li a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  font-weight: 400;
  color: var(--bright-cyan);
}

h1 a, h2 a {
  text-decoration: none;
}

h1 a:hover, h2 a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.3em;
  margin-top: 3em;
  margin-bottom: 1em;
}

a {
  color: var(--normal-red);
}

article {
  margin-bottom: 4em;
  margin-top: 3em;
}

p, article div, article span, article td, li {
  line-height: 1.5;
}

article h1 {
  margin-bottom: 1em;
  border-left: 9px solid var(--normal-cyan);
  padding-left: 27px;
}

article h1 a {
  display: inline-block;
  margin-bottom: 0.5em;
}

article h1 span {
  display: block;
  font-style: italic;
  font-size: 0.5em;
  margin-bottom: 2em;
  color: var(--bright-cyan);
}

article p {
  margin: 1.5em 0;
  text-align: justify;
}

article img {
  max-width: 100%;
}

article ul {
  padding-left: 1.66em;
}

article ul li {
  margin-bottom: 1em;
}

aside ol {
  list-style: none;
  padding: 0;
}

aside ol li {
  display: block;
}

pre, code {
  background-color: var(--normal-black);
  color: var(--normal-white);
}

pre {
  padding: 1em;
  line-height: 1.5;
  border-radius: 0.3em;
  margin: 2em 0;
  overflow: auto;
}

code {
  padding: 0.2em 0.4em;
  white-space: pre;
  border-radius: 0.3em;
}

pre code {
  padding: 0;
  background-color: inherit;
}

hr {
  margin: 3em 0 3em 0;
  border-top: 1px dotted #666;
  border-bottom: 1px dotted #666;
  border-left: none;
  border-right: none;
}

table {
  border: 1px dotted black;
  margin: 3em 0;
}

table th, table td {
  padding: 0.5em 1em 0.5em 1em;
  border-bottom: 1px dotted black;
}

table tbody tr:last-child th, table tbody tr:last-child td {
  border-bottom: none;
}

div.player {
  margin: 3em 0;
}

@media (prefers-color-scheme: dark) {
  html, body {
    color: var(--bright-white);
  }

  body {
      background-color: var(--bright-black);
      color: var(--bright-white)
  }

  pre, code {
    background-color: var(--normal-black);
    color: var(--normal-white);
  }

  a {
    color: var(--bright-red);
  }

  #header .icon svg {
    color: var(--normal-magenta);
  }
}

::selection {
  background-color: var(--normal-green);
  color: var(--normal-black);
}

.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}

.applause-btn {
  width: 54px;
  height: 54px;
  margin: 0 auto;
}

.utterances {
  max-width: 100%;
 }