:root {
  font-family: "JBMono-R", monospace;
  --background-color: rgb(30, 30, 46);
  --background-color2: rgb(17, 17, 27);
  --background-color3: rgb(49, 50, 68);
  --text-color: rgb(205, 214, 244);
  --subtext-color: rgb(147, 153, 178);
  --subtext-color2: rgb(166, 173, 200);
  --accent-color: rgb(116, 199, 236);
  --accent-color2: rgb(180, 190, 254);
  --white: rgb(205, 214, 244);
  --blue: rgb(137, 180, 250);
  --lightblue: rgba(137, 180, 250, 0.05);
  --green: rgb(166, 227, 161);
  --yellow: rgb(249, 226, 175);
  --red: rgb(243, 139, 168);
  --orange: rgb(250, 179, 135);
  --purple: rgb(203, 166, 247);
  body.light {
    --background-color: rgb(239, 241, 245);
    --background-color2: rgb(220, 224, 232);
    --background-color3: rgb(172, 176, 190);
    --text-color: rgb(76, 79, 105);
    --subtext-color: rgb(124, 127, 147);
    --subtext-color2: rgb(92, 95, 119);
    --accent-color: rgb(32, 159, 181);
    --accent-color2: rgb(114, 135, 253);
    --white: rgb(239, 241, 245);
    --blue: rgb(30, 102, 245);
    --lightblue: rgb(30, 102, 245, 0.05);
    --green: rgb(64, 160, 43);
    --yellow: rgb(223, 142, 29);
    --red: rgb(210, 15, 57);
    --orange: rgb(254, 100, 11);
    --purple: rgb(136, 57, 239);
  }

  overscroll-behavior-y: none;
  scrollbar-color: var(--text-color) transparent;

  font-size: calc(sqrt(pow(1.5vh, 2) + pow(1.5vw, 2)));
}

@font-face {
  font-family: "JBMono-R";
  src: url("/static/jbmnfm.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "JBMono-B";
  src: url("/static/jbmnfb.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "JBMono-I";
  src: url("/static/jbmnfi.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "JBMono-IB";
  src: url("/static/jbmnfbi.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

body,
body * {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block: 0.67em;
  text-align: center;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block: 0.83em;
  text-align: center;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block: 1em;
}

em,
i {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}
sup {
  vertical-align: super;
  font-size: smaller;
}

u {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
}

hr {
  color: var(--subtext-color);
  border-width: 1px;
  border-style: inset;
  margin-block: 0.5em;
  margin-inline: auto;
  overflow: hidden;
  width: 50%;

  /* FIXME: This is not really per spec */
  display: block;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin: 1em 0.75em;
}

blockquote {
  margin: 0.5rem 1rem;
  padding: 0.25rem 1rem;
  border-left: 4px solid var(--subtext-color);
}

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
}

input[type="password"] {
  letter-spacing: 4px;
}

code {
  background-color: var(--background-color2);
  border-radius: 0.4rem;
}

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

::selection {
  background-color: var(--text-color);
  color: var(--background-color);
}

::placeholder {
  font-style: italic;
}