:root, input, h1 {
  font-size: 1.05rem;
  font-family: monospace;

  --background-color: #222;
  --text-color: #eee;
  --link-color: pink;

  --border-color: rgba(0, 0, 0, 0.1);
}

body {
  display: flex;

  flex-direction: column;
}

main {
  display: flex;

  flex-direction: column;

  max-width: 70em;
}

.thing form input, .thing form textarea {
  width: 100%;
}

.thing form .field {
  margin-bottom: 1ex;
}

@media (min-width: 50em) {
  main {
    width: 50em;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    background-color: var(--background-color);
    color: var(--text-color);

    --border-color: #666;
  }

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

  input, textarea {
    color: var(--text-color);
    background-color: #555;
    mix-blend-mode: difference;
  }
}

footer.info {
  position: fixed;
  bottom: 0;
}

footer.info > *, footer.info a {
  font-size: 0.8rem;
  text-decoration: none;
  color: #999;
}

pre {
  white-space: break-spaces;
}

#tell-me {
  width: 90%;

  outline: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0);

  font-size: 2rem;
}

#tell-me:focus-visible {
  border-bottom: 1px solid black;
  
}

#waiting {
  width: 1em;
}

@media (prefers-color-scheme: light) {
  #waiting {
    filter: invert(100%);
  }
}

section#answer > ul {
  list-style-type: none;
  padding-left: 0;
}

section#answer > ul > li {
  position: relative;
}

section.thing {
  position: relative;

  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.2ex;
  margin-bottom: 1ex;
}

section.thing > p {
  margin-bottom: 0;
}

section.thing .content > p:last-child {
  padding-bottom: 0.2ex;
  margin-bottom: 0;
}

@media (min-width: 50em) {
  body {
    align-items: center;
  }

  .meta {
    position: absolute;
    right: -15em;
    top: 0.2ex;
    width: 15em;

    display: flex;
    flex-direction: column;

    opacity: 0;
  }
}

.timeline {
  color: #999;
  font-size: small;

  position: absolute;
  left: -9em;
}

footer.meta * {
  color: #999;
  font-size: small;
}

section.thing:hover .meta {
  opacity: 1;
}

section.javascript textarea {
  width: 100%;
}

section.javascript canvas {
  border: 1px solid #ddd;
}

section.javascript .js-error {
  color: red;
}

section.task .done {
  color: #555;
}