@font-face {
  font-family: "JetBrainsMonoNFPropo";
  src: url(fonts/JetBrainsMono-NF-Propo-Regular.ttf);
  font-weight: 400;
  font-variant-ligatures: normal;
}
@font-face {
  font-family: "JetBrainsMonoNFPropo";
  src: url(fonts/JetBrainsMono-NF-Propo-Bold.ttf);
  font-weight: bold;
  font-variant-ligatures: normal;
}
@keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

body {
  background-color: #1c1d25;

  --main-color: #F6F1D1;
  --header-color: #DC8400;
  --symbol-color: #49494b;
  --link-color: #0c86d8;
  --background-color: #121212;

  font-family: "JetBrainsMonoNFPropo";
  color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

::selection {
  background-color: var(--link-color);
  color: var(--main-color);
}

/* TODO: Highlight vs selection, footer */
:is(h1, h2, h3, h4, h5, h6) {
  color: var(--header-color);
  font-weight: bold;
}
h1::before {
  content: "# ";
  color: var(--symbol-color);
}
h2::before {
  content: "## ";
  color: var(--symbol-color);
}
h3::before {
  content: "### ";
  color: var(--symbol-color);
}
h4::before {
  content: "#### ";
  color: var(--symbol-color);
}
h5::before {
  content: "##### ";
  color: var(--symbol-color);
}
h6::before {
  content: "###### ";
  color: var(--symbol-color);
}

a {
  color: var(--link-color);
}

a::after {
  content: " ";
  margin-left: 0.75em;
  display: inline-block;
}

p::after {
  content: "a";
  background-color: var(--main-color);
  animation: blink infinite step-end 1.5s;
  display: inline-block;
}

#text {
  font-size: clamp(.6rem, 20px, 3rem);
  width: clamp(16em, 40em, 100em);
  border-radius: 1.5em;
  background-color: var(--background-color);
  padding: 1em;
  margin: 1em;
  overflow-y: auto;
}
.shy {
  font-size: 0.7rem;
  color: var(--symbol-color);
}

footer {
  padding-top: 1em;
  border-top: 2px solid var(--symbol-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

footer * {
  padding-left: 1em;
  padding-right: 1em;
}

footer *+* {
  border-left: solid var(--symbol-color) 2px;
}