$h1-font-size = 1.68rem
$h2-font-size = 1.6rem
$h3-font-size = 1.5rem
$h4-font-size = 1.4rem
$h5-font-size = 1.3rem
$h6-font-size = 1.2rem


.keep-markdown-body
.keep-markdown-body > .post {
  font-size 1rem

  blockquote {
    position relative
    display flex
    flex-direction column
    justify-content flex-start
    box-sizing border-box
    margin 1.4rem 0
    padding 0.8rem
    color var(--text-color-3)
    background var(--background-color-2)
    border-left 0.4rem solid var(--text-color-4)
    border-top-left-radius 0.2rem
    border-bottom-left-radius 0.2rem


    p
    ul
    ol
    footer {
      position relative
      box-sizing border-box
    }

    footer {
      margin-bottom 0.6rem
      font-style italic
    }

    cite {
      position relative
      box-sizing border-box
      margin-left 1rem
      color var(--text-color-4)

      &::before {
        content '— '
      }
    }
  }


  p {
    margin 0.6rem 0
    color var(--text-color-3)
    line-height 2
  }


  a {
    position relative
    box-sizing border-box
    padding-bottom 0.1rem
    text-decoration none
    overflow-wrap break-word
    border-bottom 0.1rem solid var(--text-color-4)
    outline 0
    cursor pointer


    .fas
    .far
    .fab {
      position relative
      margin 0 0.2rem 0 0.4rem
      color var(--text-color-4)
      font-size 0.8rem
    }


    &:hover {
      text-decoration underline

      &::after {
        background var(--primary-color)
      }
    }
  }


  strong {
    color var(--text-color-3)
  }


  em {
    color var(--text-color-3)
  }


  ul
  ol {
    li {
      margin 0.3rem 0 0.3rem 1rem
      line-height 2rem
    }
  }


  ul {

    li {
      list-style disc

      ul {

        li {
          list-style circle

          ul {
            li {
              list-style square
            }
          }
        }
      }
    }
  }


  ol {

    li {
      list-style decimal

      ol {

        li {
          list-style upper-alpha

          ol {
            li {
              list-style upper-roman
            }
          }
        }
      }
    }
  }


  li {
    color var(--text-color-3)
  }


  h1
  h2
  h3
  h4
  h5
  h6 {
    position relative
    display flex
    justify-content space-between
    order 0
    box-sizing border-box
    padding-top 0.4rem
    padding-bottom 0.2rem
    overflow hidden
    color var(--text-color-2)
    line-height 1.6
    border-bottom 1px solid var(--post-h-bottom-border-color)


    +keep-tablet() {
      line-height 1.5
    }


    +keep-mobile() {
      line-height 1.4
    }


    &:hover {
      a.headerlink
      a.markdownIt-Anchor {
        visibility visible
      }
    }


    a.headerlink
    a.markdownIt-Anchor {
      position relative
      order 1
      box-sizing border-box
      margin-left 0.4rem
      padding-top 0.2rem
      color var(--text-color-4)
      font-size 1.2rem
      text-decoration none
      border none
      visibility hidden


      &:hover {
        color var(--text-color-3)
      }


      &::before {
        font-weight 600
        font-family 'Font Awesome 6 Free'
        content '\f0c1'
      }
    }
  }


  h1 {
    font-weight 600
    font-size $h1-font-size

    +keep-tablet() {
      font-size $h1-font-size * 0.9
    }

    +keep-mobile() {
      font-size $h1-font-size * 0.8
    }

    a.headerlink
    a.markdownIt-Anchor {
      font-size $h1-font-size * 0.8
    }
  }


  h2 {
    font-weight 600
    font-size $h2-font-size

    +keep-tablet() {
      font-size $h2-font-size * 0.9
    }

    +keep-mobile() {
      font-size $h2-font-size * 0.8
    }

    a.headerlink
    a.markdownIt-Anchor {
      font-size $h2-font-size * 0.8
    }
  }


  h3 {
    font-weight 550
    font-size $h3-font-size

    +keep-tablet() {
      font-size $h3-font-size * 0.9
    }


    +keep-mobile() {
      font-size $h3-font-size * 0.8
    }


    a.headerlink
    a.markdownIt-Anchor {
      font-size $h3-font-size * 0.8
    }
  }


  h4 {
    font-weight 550
    font-size $h4-font-size

    +keep-tablet() {
      font-size $h4-font-size * 0.9
    }


    +keep-mobile() {
      font-size $h4-font-size * 0.8
    }


    a.headerlink
    a.markdownIt-Anchor {
      font-size $h4-font-size * 0.8
    }
  }


  h5 {
    font-weight 500
    font-size $h5-font-size

    +keep-tablet() {
      font-size $h5-font-size * 0.9
    }


    +keep-mobile() {
      font-size $h5-font-size * 0.8
    }


    a.headerlink
    a.markdownIt-Anchor {
      font-size $h5-font-size * 0.8
    }
  }


  h6 {
    font-weight 500
    font-size $h6-font-size

    +keep-tablet() {
      font-size $h6-font-size * 0.9
    }

    +keep-mobile() {
      font-size $h6-font-size * 0.8
    }

    a.headerlink
    a.markdownIt-Anchor {
      font-size $h6-font-size
    }
  }


  img {
    position relative
    display block
    box-sizing border-box
    max-width 100%
    box-shadow 0 0 0.2rem var(--shadow-color)
    cursor zoom-in
    opacity 1

    &.hide {
      opacity 0
    }

    &[lazyload] {
      margin 0.8rem auto 0.2rem
      zoom 1 !important
    }
  }


  & > img
  p > img {
    margin var(--post-img-align)

    if (hexo-config('post') && hexo-config('post.img_align') == 'left') {
      margin 0 auto 0 0
    }

    if (hexo-config('post') && hexo-config('post.img_align') == 'center') {
      margin 0 auto
    }

    if (hexo-config('post') && hexo-config('post.img_align') == 'right') {
      margin 0 0 0 auto
    }
  }


  & > .table-container {
    box-sizing border-box
    width 100%
    margin 1.5rem 0
    overflow auto

    table {
      box-sizing border-box
      width 100%
      border-collapse collapse
      border-spacing 0


      td
      th {
        padding 0
        white-space nowrap
      }


      td {
        color var(--text-color-3)
      }


      th {
        color var(--text-color-2)
        font-weight 600
      }


      td
      th {
        padding 0.5rem 1rem
        border 0.1rem solid var(--border-color)
      }


      tr {
        background-color var(--background-color-1)
        border 0.1rem solid var(--border-color)
      }

      tr:nth-child(2n) {
        background-color var(--background-color-2)
      }
    }
  }


  .mermaid {
    background #f5f5f5 !important
    border-radius 0.3rem
  }
}