.content {
  max-width: var(--body-width);
  padding: 1rem 1rem 4rem 1rem;
  margin: 0 auto;
}

.content__body {
  overflow-wrap: break-word;

  * {
    scroll-margin-top: 5rem;
  }

  >* {
    overflow-x: auto;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 2rem 0 0 0;
    color: var(--secondary-color);
  }

  h6 {
    font-size: 0.765rem;
  }

  figure {
    margin: 2rem 0;
    text-align: center;

    figcaption {
      margin-top: 0.5rem;
      font-style: italic;
    }
  }

  table {
    display: block;
    max-width: 100%;
  }

  code {
    background: var(--bg-color2);
    border-radius: 4px;
    padding: 0 0.25ch;
  }

  pre {
    font-size: 0.8rem;
    padding: 1rem;
    border-radius: min(calc(100vw - var(--body-width)), 12px);
    margin: 2rem -1rem;

    code {
      background: unset;
      margin: 0;
      display: block;
      overflow: auto;
      padding: 0;
    }
  }
  
  del {
    text-decoration-color: var(--accent-color);
    text-decoration-thickness: 3px;
  }

  blockquote {
    margin: 0;
    padding: 0 1em;
    color: #656d76;
    border-left: solid var(--bg-color2) .3em;
  }

  ol ol,
  ul ol {
    list-style-type: lower-roman;
  }

  ul ul ol,
  ul ol ol,
  ol ul ol,
  ol ol ol {
    list-style-type: lower-alpha;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1rem 0;

    th {
      background: #eff3f7;
      text-align: left;
      font-weight: 700;
    }

    th, td {
      padding: 0.4em 0.8em;
      border: solid var(--bg-color2) 2px;
    }
  }

  pre table {
    margin: 0;

    td:nth-of-type(1) {
      padding: 0 1rem 0 0;
      text-align: right;
      user-select: none;
    }

    th, td {
      padding: 0;
      border: none;
    }
  }

  .footnote-definition {
    margin-top: 1rem;

    &>p {
      display: inline;
    }

    &+.footnote-definition {
      margin-top: 0;
    }
  }

  img, video {
    display: block;
    border-radius: 12px;
    max-width: 100%;
    margin: 2rem auto;
  }

  hr {
    border: none;
    height: 3px;
    background: var(--bg-color2);
  }
}

.post-header {
  margin: 1rem 0 3rem 0;
}

.post-header__title {
  margin: 0;
}

.post-header__link {
  text-decoration: none;
}

.post-header__meta {
  margin: 1rem 0;
  display: flex;
  gap: 0.5rem 2rem;
  flex-wrap: wrap;
}

.post-header__data {
  display: flex;
  align-items: center;
  gap: 1ch;
  color: var(--secondary-color);

  &>svg {
    fill: var(--secondary-color);
  }
}