/* --- prose.css --- */

@layer prose {
  #content-area {
    font-family: var(--reader-font-family, var(--my-font-default));
    font-size: var(--reader-font-size, 1em);
    margin-inline: auto;
    max-width: var(--reader-measure, 70ch);
  }

  #content-area p {
    color: var(--reader-text-color, inherit);
    letter-spacing: var(--my-p-letter-spacing);
    line-height: var(--reader-line-height, 1.5);
    margin-top: 0;
    text-align: justify;
  }

  #content-area li {
    color: var(--reader-text-color, inherit);
  }

  #content-area aside {
    color: var(--my-text-note);
    line-height: var(--reader-line-height, 1.5);
    margin: 2rem;
    text-align: justify;
  }

  #content-area blockquote {
    border-left: 0.2rem solid var(--my-bg);
    padding-left: 1rem;
  }

  #content-area hr {
    background: var(--my-rule-color);
    border: none;
    height: 1px;
    margin: 2rem 0;
  }

  #content-area img {
    display: block;
    height: auto;
    margin: 2rem auto;
    max-width: 100%;
    overflow: hidden;
  }

  #content-area ul {
    color: var(--reader-text-color, var(--my-text-body));
  }

  #content-area ul.custom {
    list-style-type: square;
  }

  #content-area ul.custom li::marker {
    color: var(--my-accent1);
    margin-right: 1rem;
  }

  #content-area ul li:not(:last-child) {
    margin-bottom: 1rem;
  }

  #content-area h1,
  #content-area h2,
  #content-area h3,
  #content-area h4,
  #content-area h5,
  #content-area h6 {
    scroll-margin-top: 1rem;
  }

  #content-area h1 {
    color: var(--my-h1);
    font-family: var(--my-h1-font-family);
    font-variant-caps: var(--my-h1-font-variant-caps);
    font-size: var(--my-h1-size);
    font-weight: var(--my-h1-font-weight);
    letter-spacing: var(--my-h1-letter-spacing);
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
  }

  #content-area h2 {
    color: var(--my-h2);
    font-family: var(--my-h2-font-family);
    font-size: var(--my-h2-size);
    font-weight: var(--my-h2-font-weight);
    letter-spacing: var(--my-h2-letter-spacing);
    margin-bottom: 0.75em;
    margin-top: 0;
  }

  #content-area h3 {
    border-bottom: 1px dotted var(--my-h3-rule);
    color: var(--my-h3);
    font-family: var(--my-h3-font-family);
    font-size: var(--my-h3-size);
    font-weight: var(--my-h3-font-weight);
    letter-spacing: var(--my-h3-letter-spacing);
    margin-bottom: 0.5em;
    margin-top: 2.5rem;
    padding-bottom: 0.5em;
  }

  #content-area h4 {
    color: var(--my-h4);
    font-family: var(--my-h4-font-family);
    font-size: var(--my-h4-size);
    font-weight: var(--my-h4-font-weight);
    letter-spacing: var(--my-h4-letter-spacing);
    margin-bottom: 0.25rem;
    margin-top: 2em;
  }

  #content-area h5 {
    color: var(--my-h5);
    font-family: var(--my-h5-font-family);
    font-size: var(--my-h5-size);
    font-weight: var(--my-h5-font-weight);
    letter-spacing: var(--my-h5-letter-spacing);
    margin-bottom: 0;
  }

  #content-area h6 {
    color: var(--my-h6);
    font-family: var(--my-h6-font-family);
    font-size: var(--my-h6-size);
    font-weight: var(--my-h6-font-weight);
    letter-spacing: var(--my-h6-letter-spacing);
  }

  #content-area h4 + h2 {
    margin-top: 1rem;
  }

  #content-area .red-letters {
    color: red;
  }

  #content-area .memorial {
    font-size: larger;
    text-align: center;
    width: 100%;
  }

  #content-area #subtitle-span {
    text-align: center;
    width: 100%;
  }

  #content-area .bible-verse {
    background-color: var(--my-verse-bg);
    border-radius: 1rem;
    margin: 0 auto 1rem;
    padding: 1rem;
  }

  #content-area .bible-verse h6 {
    font-size: inherit;
    margin: 0;
    padding: 0;
  }

  #content-area .bible-verse p {
    font-family: var(--my-bible-verse-font-family);
    font-style: var(--my-bible-verse-font-style);
    margin-bottom: 1rem;
    text-align: var(--my-bible-verse-text-align);
  }

  #content-area .bible-verse p:only-child,
  #content-area .bible-verse p:last-child {
    margin-bottom: 0;
  }
}