@layer content {
  .content {
    & h1 {
      margin-block: var(--el-h1-vspace-top) var(--el-h1-vspace-bottom);
      padding-bottom: var(--spacing-snug);
      border-bottom: var(--size-4) solid var(--el-h1-color);

      font-family: var(--el-h1-font-family), serif;
      font-size: var(--el-h1-font-size);
      font-weight: var(--el-h1-font-weight);
      line-height: var(--el-h1-line-height);
      color: var(--el-h1-color);
      text-transform: var(--el-h1-text-transform);
      letter-spacing: var(--el-h1-letter-spacing);

      & + p,
      & + ul,
      & + ol,
      & + blockquote {
        margin-block:
            calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
            calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
      }

      & + h2 {
        margin-block:
            calc(1em * var(--el-h1-line-height) * var(--vspace-snug))
            calc(1em * var(--el-h1-line-height) * var(--vspace-normal));
      }
    }

    & h2 {
      margin-block: var(--el-h2-vspace-top) var(--el-h2-vspace-bottom);
      padding-left: var(--spacing-snug);
      border-left: var(--size-4) solid var(--el-h2-color);

      font-family: var(--el-h2-font-family), serif;
      font-size: var(--el-h2-font-size);
      font-weight: var(--el-h2-font-weight);
      line-height: var(--el-h2-line-height);
      color: var(--el-h2-color);
      text-transform: var(--el-h2-text-transform);
      letter-spacing: var(--el-h2-letter-spacing);

      & + p,
      & + ul,
      & + ol,
      & + blockquote {
        margin-block:
            calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
            calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
      }

      & + h3 {
        margin-block:
            calc(1em * var(--el-h1-line-height) * var(--vspace-compressed))
            calc(1em * var(--el-h1-line-height) * var(--vspace-snug));
      }
    }

    & h3 {
      margin-block: var(--el-h3-vspace-top) var(--el-h3-vspace-bottom);
      padding: var(--spacing-tight) var(--spacing-snug);

      font-family: var(--el-h3-font-family), serif;
      font-size: var(--el-h3-font-size);
      font-weight: var(--el-h3-font-weight);
      line-height: var(--el-h3-line-height);
      color: var(--color-surface-base);
      text-transform: var(--el-h3-text-transform);
      letter-spacing: var(--el-h3-letter-spacing);

      background: var(--el-h3-color);
    }

    & h4 {
      margin-block: var(--el-h4-vspace-top) var(--el-h4-vspace-bottom);
      padding: var(--spacing-tight) var(--spacing-snug);
      border-top: var(--size-3 ) solid var(--el-h4-color);
      border-bottom: var(--size-3 ) solid var(--el-h4-color);

      font-family: var(--el-h4-font-family), serif;
      font-size: var(--el-h4-font-size);
      font-weight: var(--el-h4-font-weight);
      line-height: var(--el-h4-line-height);
      text-transform: var(--el-h4-text-transform);
      letter-spacing: var(--el-h4-letter-spacing);
    }

    & h5 {
      margin-block: var(--el-h5-vspace-top) var(--el-h5-vspace-bottom);
      padding: var(--spacing-tight) var(--spacing-snug);

      font-family: var(--el-h5-font-family), serif;
      font-size: var(--el-h5-font-size);
      font-weight: var(--el-h5-font-weight);
      line-height: var(--el-h5-line-height);
      color: var(--el-h5-color);
      text-transform: var(--el-h5-text-transform);
      letter-spacing: var(--el-h5-letter-spacing);

      &::before,
      &::after {
        content: "";
        padding-right: var(--spacing-tight);
        line-height: 1;
      }

      &::before {
        content: "❭";
      }

      &::after {
        content: "";
      }
    }

    & h6 {
      margin-block: var(--el-h6-vspace-top) var(--el-h6-vspace-bottom);

      font-family: var(--el-h6-font-family), serif;
      font-size: var(--el-h6-font-size);
      font-weight: var(--el-h6-font-weight);
      line-height: var(--el-h6-line-height);
      color: var(--el-h6-color);
      text-transform: var(--el-h6-text-transform);
      letter-spacing: var(--el-h6-letter-spacing);
    }

    & h3,
    & h4,
    & h5,
    & h6 {
      & + p,
      & + ul,
      & + ol,
      & + blockquote {
        margin-block:
            calc(1em * var(--typo-leading-normal) * var(--vspace-compressed))
            calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
      }
    }

    & p {
      margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);

      font-family: var(--el-p-font-family), sans-serif;
      font-size: var(--el-p-font-size);
      font-weight: var(--el-p-font-weight);
      line-height: var(--el-p-line-height);
      color: var(--el-p-color);
      text-align: var(--el-p-text-align);
    }

    & blockquote {
      margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
      padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
      border-left: var(--size-4) solid var(--color-text-tertiary);

      font-family: var(--el-blockquote-font-family), serif;
      font-size: var(--el-blockquote-font-size);
      font-weight: var(--el-blockquote-font-weight);
      font-style: var(--el-blockquote-font-style);
      line-height: var(--el-blockquote-line-height);
      color: var(--el-blockquote-color);
    }

    & pre {
      margin-block: var(--el-pre-vspace-top) var(--el-pre-vspace-bottom);
      padding: var(--spacing-comfortable);

      font-family: var(--el-pre-font-family), monospace;
      font-size: var(--el-pre-font-size);
      line-height: var(--el-pre-line-height);
      color: var(--el-pre-color);

      background: var(--el-pre-background);
    }

    & ul,
    & ol {
      margin-block: var(--el-list-vspace-top) var(--el-list-vspace-bottom);
      font-size: var(--el-list-font-size);
      line-height: var(--el-list-line-height);
      color: var(--el-list-color);

      & ul,
      & ol {
        margin-block: var(--el-list-nested-vspace-top) var(--el-list-nested-vspace-bottom);
      }

      & li {
        margin-block: var(--el-li-vspace-top) var(--el-li-vspace-bottom);
        list-style-position: outside;

        & li {
          margin-block: var(--el-li-nested-vspace-top) var(--el-li-nested-vspace-bottom);
        }
      }
    }

    & ul {
      padding-left: var(--el-ul-indent-l1);
      list-style: none;

      & li {
        padding-left: var(--el-ul-item-padding);

        &::marker {
          content: var(--el-ul-symbol-l1);
          color: var(--el-ul-symbol-l1-color);
        }
      }

      & ul,
      & ol {
        padding-left: var(--el-ul-indent-l2);

        & li::marker {
          content: var(--el-ul-symbol-l2);
          color: var(--el-ul-symbol-l2-color);
        }

        & ul,
        & ol {
          padding-left: var(--el-ul-indent-l3);

          & li::marker {
            content: var(--el-ul-symbol-l3);
            color: var(--el-ul-symbol-l3-color);
          }

          & ul,
          & ol {
            padding-left: var(--el-ul-indent-l4);

            & li::marker {
              content: var(--el-ul-symbol-l4);
              color: var(--el-ul-symbol-l4-color);
            }
          }
        }
      }
    }

    ol {
      counter-reset: ol-l1;
      contain: style;
      padding-left: var(--el-ol-indent-l1);
      list-style: none;

      & > li {
        counter-increment: ol-l1;
        margin-left: var(--el-ol-item-indent-l1);
        padding-left: var(--el-ol-item-padding);

        &::marker {
          content: var(--el-ol-prefix-l1) counter(ol-l1, var(--el-ol-style-l1)) var(--el-ol-suffix-l1);
          color: var(--el-ol-marker-color-l1);
        }

        & > ol {
          counter-reset: ol-l2;
          padding-left: var(--el-ol-indent-l2);

          & > li {
            counter-increment: ol-l2;
            margin-left: var(--el-ol-item-indent-l2);

            &::marker {
              content: var(--el-ol-prefix-l2) counter(ol-l2, var(--el-ol-style-l2)) var(--el-ol-suffix-l2);
              color: var(--el-ol-marker-color-l2);
            }

            & > ol {
              counter-reset: ol-l3;
              margin-left: var(--el-ol-item-indent-l3);
              padding-left: var(--el-ol-indent-l3);

              & > li {
                counter-increment: ol-l3;

                &::marker {
                  content: var(--el-ol-prefix-l3) counter(ol-l3, var(--el-ol-style-l3)) var(--el-ol-suffix-l3);
                  color: var(--el-ol-marker-color-l3);
                }

                & > ol {
                  counter-reset: ol-l4;
                  margin-left: var(--el-ol-item-indent-l4);
                  padding-left: var(--el-ol-indent-l4);

                  & > li {
                    counter-increment: ol-l4;

                    &::marker {
                      content: var(--el-ol-prefix-l4) counter(ol-l4, var(--el-ol-style-l4)) var(--el-ol-suffix-l4);
                      color: var(--el-ol-marker-color-l4);
                    }
                  }
                }

                & > ul {
                  padding-left: var(--el-ol-indent-l4);
                }
              }
            }

            & > ul {
              padding-left: var(--el-ol-indent-l3);
            }
          }
        }

        & > ul {
          padding-left: var(--el-ol-indent-l2);
        }
      }
    }

    & dl {
      margin-block: var(--el-dl-vspace-top) var(--el-dl-vspace-bottom);
      font-size: var(--el-dl-font-size);
      line-height: var(--el-dl-line-height);
    }

    & dt {
      margin-block: var(--el-dt-vspace-top) var(--el-dt-vspace-bottom);
      padding: var(--el-dt-padding);

      font-family: var(--el-dt-font-family), serif;
      font-size: var(--el-dt-font-size);
      font-weight: var(--el-dt-font-weight);
      line-height: var(--el-dt-line-height);
      color: var(--el-dt-color);
      text-transform: var(--el-dt-text-transform);
      letter-spacing: var(--el-dt-letter-spacing);

      background: var(--el-dt-background);
    }

    & dd {
      margin-block: var(--el-dd-vspace-top) var(--el-dd-vspace-bottom);
      padding: var(--el-dd-indent);

      font-family: var(--el-dd-font-family), sans-serif;
      font-size: var(--el-dd-font-size);
      line-height: var(--el-dd-line-height);
      color: var(--el-dd-color);
    }

    & table {
      border-collapse: collapse;

      width: 100%;
      margin-block: var(--el-table-vspace-top) var(--el-table-vspace-bottom);
      border: var(--el-table-border);

      font-size: var(--el-table-font-size);
      line-height: var(--el-table-line-height);

      & thead th,
      & th {
        padding: var(--el-th-padding);

        font-family: var(--el-th-font-family), serif;
        font-size: var(--el-th-font-size);
        font-weight: var(--el-th-font-weight);
        line-height: var(--el-th-line-height);
        color: var(--el-th-color);
        text-transform: var(--el-th-text-transform);

        background: var(--el-th-background);
      }

      & tbody td,
      & td {
        padding: var(--el-td-padding);
        border: var(--el-td-border);

        font-family: var(--el-td-font-family), monospace;
        font-size: var(--el-td-font-size);
        line-height: var(--el-td-line-height);
        color: var(--el-td-color);
        text-align: center;
      }
    }

    &  hr{
      position: relative;

      overflow: visible;

      height: var(--hr-height);
      margin-block: var(--hr-margin);
      border: none;

      background: var(--hr-color);

      &::after {
        content: var(--hr-symbol-content);

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        padding: var(--hr-symbol-space);

        font-size: var(--hr-symbol-size);
        line-height: var(--hr-symbol-line-height);
        color: var(--hr-symbol-color);

        background: var(--hr-symbol-background);
      }
    }

    & em,
    & i {
      padding: 0.1em 0.2em;
      font-style: normal;
      color: var(--color-text-inverse);
      background: var(--color-surface-inverse);
    }

    & strong,
    & b {
      font-weight: var(--typo-weight-black);
      letter-spacing: var(--typo-spacing-relaxed);
    }

    a {
      @mixin anim-txt-pixelshift 0.6s steps(15, end), var(--color-primary);

      color: var(--color-text-tertiary);
      transition: color 0.2s ease-in-out;

      &:hover {
        cursor: pointer;
        color: var(--color-primary);
      }

      &:visited,
      &:active {
        color: var(--color-primary-emphasis);
      }
    }

    & code {
      padding: 0.1em 0.3em;

      font-family: var(--font-mono), monospace;
      font-size: var(--typo-size-sm);
      color: var(--color-text-inverse);

      background: var(--color-surface-inverse);
    }

    & kbd {
      padding: 0.1em 0.3em;
      border: 1px solid var(--color-text-primary);
      border-radius: 2px;

      font-family: var(--font-mono), monospace;
      font-size: var(--typo-size-xs);
      color: var(--color-text-inverse);
      text-transform: uppercase;

      background: var(--color-surface-inverse);
    }

    & samp {
      padding: 0.1em 0.3em;
      border-left: var(--size-1) solid var(--color-text-tertiary);

      font-family: var(--font-mono), monospace;
      font-size: var(--typo-size-sm);
      color: var(--color-text-primary);

      background: var(--color-surface-elevated-2);
    }

    & var {
      font-family: var(--font-mono), monospace;
      font-weight: var(--typo-weight-semibold);
      font-style: normal;
      color: var(--color-text-secondary);
    }

    & small {
      font-size: var(--typo-size-xs);
      color: var(--color-text-tertiary);
    }

    & sub,
    & sup {
      font-size: var(--typo-size-2xs);
      font-weight: var(--typo-weight-semibold);
      color: var(--color-text-secondary);
    }

    & del,
    & s {
      color: var(--color-text-disabled);
      text-decoration: line-through;
      text-decoration-thickness: var(--size-1);
    }

    & ins {
      font-weight: var(--typo-weight-semibold);
      color: var(--color-text-primary);
      text-decoration: underline;
      text-decoration-color: var(--color-primary);
      text-decoration-thickness: var(--size-1);

      background: transparent;
    }

    & abbr {
      cursor: help;
      text-decoration: underline dotted;
      text-underline-offset: var(--size-1);
    }

    & dfn {
      font-weight: var(--typo-weight-bold);
      font-style: normal;
      color: var(--color-text-primary);
    }

    & cite {
      font-weight: var(--typo-weight-semibold);
      font-style: normal;
      color: var(--color-text-secondary);
    }

    & q {
      font-style: normal;

      &::before {
        content: "»";
      }

      &::after {
        content: "«";
      }
    }

    & time {
      font-family: var(--font-mono), monospace;
      font-size: var(--typo-size-sm);
      color: var(--color-text-secondary);
    }
  }
}