html {
  box-sizing: border-box;
  --filler-bg: #2c713f;
  --filler-bg-darkened: #16420b;
  --filler-fg: white;
  --filler-fg-hover: #ddd;
  --main-bg: white;
  --main-fg: black;
  --dimmed-background: #eee;
  --soft-border: #ddd;
  --article-radius: 0.5rem;
  --article-x-pad: 1.5rem;
}
*, ::after, ::before {
  box-sizing: inherit;
}
body {
  max-width: 40rem;
  overflow-x: hidden;
  margin: 0 auto;
  background: var(--filler-bg);
  font: 400 1rem/1.5 sans-serif;
  color: var(--filler-fg);
}
header, article, footer {
  margin: 0 calc(-1 * var(--article-radius));
}
header, footer {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--article-x-pad);
  a {
    color: inherit;
    font-style: italic;
    &:hover {
      color: var(--filler-fg-hover);
    }
  }
  article-length {
    display: block;
  }
}
article {
  position: relative;
  overflow-x: auto;
  box-shadow: 0 10px 40px var(--filler-bg-darkened);
  border-radius: var(--article-radius);
  padding: 1rem var(--article-x-pad);
  background: var(--main-bg);
  color: var(--main-fg);
  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem;
  }
  p, p-note, dl, ol, ul {
    margin: 0 0 1rem;
  }
  pre, code {
    padding: 2px 5px;
    background: var(--dimmed-background);
  }
  code {
    padding: 2px 5px;
    background: var(--dimmed-background);
  }
  pre code {
    padding: 0;
  }
  hr {
    margin: 1rem calc(-1 * var(--article-x-pad));
    border: 1px solid var(--soft-border);
  }
  img {
    max-width: 100%;
  }
  p-note {
    position: relative;
    display: block;
    border: 1px solid var(--soft-border);
    border-radius: 0.5rem;
    background: var(--dimmed-background);
    padding: 0.5rem;
    padding-left: 2rem;
    font-style: italic;
    &::before {
      position: absolute;
      left: 0.5rem;
      font-style: normal;
      content: '🛈';
    }
  }
}