:root {
  --bg: #16161a;
  --fg: #dcdae6;
  --ac: #b38cd2;
  --em: #58ab8f;
  --ds: #8a9fab;
  --lv: #cf8a7c;
}

@media (prefers-color-scheme: light) {
  :root {
    --fg: #16161a;
    --bg: #dcdae6;
    --ac: #625699;
    --em: #196c50;
    --ds: #3d3d4d;
    --lv: #914c3e;
  }
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: Hectic Micro, monospace;

  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Hectic Micro;
  src: url(/HecticMicro.ttf);
  size-adjust: 160%;
  ascent-override: 76%;
  descent-override: 25%;
  line-gap-override: 0%;
  font-display: swap;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main {
  max-width: 80ch;
  margin: 3rem 5rem;
}

section, p {
  margin: 1rem 0;
  margin-top: 0;
}

h1 {
  margin: 0;
  margin-top: 1rem;
}

h2 {
  margin-bottom: 0;
  font-weight: normal;
}

.pfp {
  border-radius: 100%;
}

pre {
  margin-top: .1rem;
  font-family: Hectic Micro, monospace, sans-serif;
  font-size: small;
  color: var(--ds);
  word-break: break-all;
  white-space: normal;
}

em { color: var(--em); font-style: normal }
a, b { color: var(--ac) }
small, i { color: var(--ds) }
.lv { color: var(--lv); margin: 0 1ch; margin-right: 0 }
.row { display: flex; flex-direction: row; align-items: center }
.tab-bar { margin-left: auto }
.c-88x31 { margin-top: .5rem }
.c-88x31 img { image-rendering: pixelated }
article { max-width: 80ch }

input[name=tabs] {
  display: none;
}

label.tab {
  background: var(--fg);
  color: var(--bg);
  padding: .2rem 1rem;
  cursor: pointer;
  user-select: none;

  padding-bottom: 0rem;
  border-bottom: .2rem solid var(--fg);
  transition: all 150ms;
}

article.tab-content { display: none }

main input[name=tabs]:nth-of-type(1):checked ~ section label.tab:nth-of-type(1),
main input[name=tabs]:nth-of-type(2):checked ~ section label.tab:nth-of-type(2),
main input[name=tabs]:nth-of-type(3):checked ~ section label.tab:nth-of-type(3)
{
  border-bottom: .2rem solid var(--ac);
  color: var(--ac);
  background: var(--bg);
}

main input[name=tabs]:nth-of-type(1):checked ~ article.tab-content:nth-of-type(1),
main input[name=tabs]:nth-of-type(2):checked ~ article.tab-content:nth-of-type(2),
main input[name=tabs]:nth-of-type(3):checked ~ article.tab-content:nth-of-type(3)
{
  display: initial;
}

@media only screen and (max-width: calc(80ch + 10rem)) {
  main {
    width: calc(100% - 4rem);
    margin: 3rem 2rem;
  }

  .row { flex-direction: column }
  .tab-bar { margin-top: 1rem; margin-left: initial }
}