@font-face {
  font-family: "Terminus (TTF)";
  src: local("Terminus (TTF)"), url("/f/TerminusTTF.ttf");
}
@font-face {
  font-family: "x8y12pxTheStrongGamer";
  src: local("x8y12pxTheStrongGamer"), url("/f/x8y12pxTheStrongGamer.ttf");
}
@font-face {
  font-family: "Comic Mono";
  src: local("Comic Mono"), url("/f/ComicMono.ttf");
}
@font-face {
  font-family: "Monocraft";
  src: local("Monocraft"), url("/f/Monocraft.ttf");
}
@font-face {
  font-family: "Miracode";
  src: local("Miracode"), url("/f/Miracode.ttf");
}
@font-face {
  font-family: "VCR OSD Mono";
  src: local("VCR OSD Mono"), url("/f/VCR_OSD_MONO_1.001.ttf");
}
@font-face {
  font-family: "OpenDyslexic";
  src: local("OpenDyslexic"), url("/f/opendyslexic.otf");
}
:root {
  --s-font: "Terminus (TTF)";
  --s-size-normal: 16px;
  --s-line-height: 1;
  --s-theme-bg: #2a2629;
  --s-theme-fg: #f2f1d6;
  --s-theme-border: #4a3535;
  --s-theme-highlight: #9f714a;
  --s-theme-fg-faint: #605951;
}
::-moz-selection {
  color: #f2f1d6;
  background: #4a3535;
}
::selection {
  color: #f2f1d6;
  background: #4a3535;
}
::-moz-selection {
  color: var(--s-theme-fg);
  background: var(--s-theme-border);
}
::selection {
  color: var(--s-theme-fg);
  background: var(--s-theme-border);
}
* {
  box-sizing: border-box;
  font-family: monospace;
  font-size: 16px;
  line-height: 1;
  font-smooth: never;
  color-scheme: dark;
  border-radius: 0;
}
* {
  font-family: var(--s-font);
  line-height: var(--s-line-height);
}
html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  width: 100%;
}
html {
  background-color: #2a2629;
  color: #f2f1d6;
}
html {
  background-color: var(--s-theme-bg);
  color: var(--s-theme-fg);
}
code {
  white-space: pre;
}
.background {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
main {
  width: 640px;
  margin: 16px auto;
  margin-bottom: 100px;
  background-color: #2a2629;
  transition-property: all;
  transition-duration: 250ms;
}
main { background-color: var(--s-theme-bg); }
.faint { color: #605951; }
.faint { color: var(--s-theme-fg-faint); }
a.faint { cursor: not-allowed; }
section {
  width: 100%;
  border-left: 2px solid #4a3535;
  margin-bottom: 16px;
}
section {
  border-left-color: var(--s-theme-border);
}
section p {
  margin: 8px 16px;
}
header {
  width: 100%;
  background: #4a3535;
  transition-property: background;
  transition-duration: 250ms;
}
header { background: var(--s-theme-border); }
header h2 {
  margin: 0;
  padding: 2px 0px 2px 16px;
  color: #9f714a;
  transition-property: color;
  transition-duration: 250ms;
}
header h2 { color: var(--s-theme-highlight); }
header h2::before {
  content: ">\a0";
  display: inline-block;
}
table {
  border-spacing: 0;
}
td, th {
  padding: 1px 0px 1px 16px;
  text-align: left;
  vertical-align: top;
  overflow: hidden;
}
tr {
  transition-property: all;
  transition-duration: 250ms;
}
tr:hover {
  background: #4a3535;
  transition-property: background;
  transition-duration: 250ms;
}
tr:hover { background: var(--s-theme-border); }
a, a:visited {
  color: #9f714a;
  transition-property: color;
  transition-duration: 250ms;
}
a, a:visited { color: var(--s-theme-highlight); }
ul { list-style-type: none; padding-left: 1em; }
li::before {
  display: inline-block;
  content: ">";
  margin-right: 10px;
  transition-property: all;
  transition-duration: 250ms;
}
li:hover::before {
  color: #9f714a;
  transform: translateX(4px);
}
li:hover::before { color: var(--s-theme-highlight); }
.formgroup {
  display: flex;
  width: 100%;
  align-content: center;
  align-items: center;
  margin: 4px;
}
.formgroup label {
  width: 100px;
  display: block;
}
.formgroup select,
.formgroup option,
.formgroup input {
  border: 1px solid #4a3535;
  background: #2a2629;
  color: #f2f1d6;
  transition-property: all;
  transition-duration: 250ms;
}
.formgroup select,
.formgroup option,
.formgroup input {
  border: 1px solid var(--s-theme-border);
  background: var(--s-theme-bg);
  color: var(--s-theme-fg);
}
.theme-preview {
  display: flex;
  margin-left: 10px;
}
.theme-preview div {
  width: 14px;
  height: 14px;
  margin: 4px;
  border: 2px solid #4a3535;
  transition-property: all;
  transition-duration: 250ms;
}
.theme-preview div { border-color: var(--s-theme-border); }
.theme-preview div:nth-child(1) { background-color: #2a2629; }
.theme-preview div:nth-child(2) { background-color: #f2f1d6; }
.theme-preview div:nth-child(3) { background-color: #4a3535; }
.theme-preview div:nth-child(4) { background-color: #9f714a; }
.theme-preview div:nth-child(5) { background-color: #605951; }
.theme-preview div:nth-child(1) { background-color: var(--s-theme-bg); }
.theme-preview div:nth-child(2) { background-color: var(--s-theme-fg); }
.theme-preview div:nth-child(3) { background-color: var(--s-theme-border); }
.theme-preview div:nth-child(4) { background-color: var(--s-theme-highlight); }
.theme-preview div:nth-child(5) { background-color: var(--s-theme-fg-faint); }
.warning-small-terminal {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2a2629;
  z-index: 1000;
}
.warning-small-terminal > div {
  margin: auto 24px;
}
@media (max-width: 640px) {
  main {
    width: 100%;
    margin: 0px;
  }
}
:root:has(#font [value=terminus]:checked) {
  --s-font: "Terminus (TTF)";
  --s-size-normal: 16px;
  --s-line-height: 1;
}
:root:has(#font [value=x8y12pxTheStrongGamer]:checked) {
  --s-font: "x8y12pxTheStrongGamer";
  --s-size-normal: 16px;
  --s-line-height: 1.1;
}
:root:has(#font [value=monospace]:checked) {
  --s-font: "monospace";
  --s-size-normal: 20px;
  --s-line-height: 1.2;
}
:root:has(#font [value=comicmono]:checked) {
  --s-font: "Comic Mono";
  --s-size-normal: 20px;
  --s-line-height: 1.2;
}
:root:has(#font [value=monocraft]:checked) {
  --s-font: "Monocraft";
  --s-size-normal: 20px;
  --s-line-height: 1.2;
}
:root:has(#font [value=miracode]:checked) {
  --s-font: "Miracode";
  --s-size-normal: 20px;
  --s-line-height: 1.2;
}
:root:has(#font [value=vcr-osd]:checked) {
  --s-font: "VCR OSD Mono";
  --s-size-normal: 20px;
  --s-line-height: 1.2;
}
:root:has(#font [value=opendyslexic]:checked) {
  --s-font: "OpenDyslexic";
  --s-size-normal: 20px;
  --s-line-height: 1.4;
}
:root:has(#theme [value=default]:checked) {
  --s-theme-bg: #2a2629;
  --s-theme-fg: #f2f1d6;
  --s-theme-border: #4a3535;
  --s-theme-highlight: #9f714a;
  --s-theme-fg-faint: #605951;
}
:root:has(#theme [value=creamy]:checked) {
  --s-theme-bg: #2a2629;
  --s-theme-fg: #f2f1d6;
  --s-theme-border: #4a3535;
  --s-theme-highlight: #9f714a;
  --s-theme-fg-faint: #605951;
}
:root:has(#theme [value=jolly]:checked) {
  --s-theme-bg: #0d0e15;
  --s-theme-fg: #6574a5;
  --s-theme-border: #262c3e;
  --s-theme-highlight: #7183b9;
  --s-theme-fg-faint: #4c577c;
}
:root:has(#theme [value=amethyst]:checked) {
  --s-theme-bg: #1f1434;
  --s-theme-fg: #fecbe6;
  --s-theme-border: #5d3a9a;
  --s-theme-highlight: #c890f0;
  --s-theme-fg-faint: #a678f1;
}
section#settings header {
  cursor: pointer;
  user-select: none;
}
section#settings h2::before {
  transition-property: all;
  transition-duration: 250ms;
}
section#settings:has(#settings-toggle:checked) h2::before {
  transform: rotate(90deg) translate(0.25em);
}
section#settings form {
  height: 0px;
  overflow: hidden;
  transition-property: height;
  transition-duration: 250ms;
}
input#settings-toggle { display: none; }
input#settings-toggle:checked + form {
  height: 100px;
}