article.md
  max-width: 100%
  padding: 1rem
  color: var(--text-p1)
  line-height: 1.7
  word-break: break-word

article.md.excerpt
  p
    font-size: $fs-14
    margin: 1em 0

article.md.content
  position: relative
  margin-bottom: 2rem
  >:first-child
    margin-top: 0
  h1.article-title
    margin-top: 0.5rem
    line-height: 1.2
    color: var(--text-p0)
  h2:first-child
    margin-top: 0
  h2,h3,h4,h5,h6
    color: var(--text-p0)
    padding-top: 1rem
    margin-bottom: 1em
    &:hover
      a.headerlink:before
        opacity: 1

// titles
article.md.content
  a.headerlink:before
    opacity: 0
    content: '#'
    position: absolute
    margin-left: -0.75em
  h2
    margin-top: 3rem
    border-bottom: 1px solid var(--block-border)
    font-weight: 400
  h3
    margin-top: 1.5rem
    font-weight: 400
  h4,h5,h6
    font-weight: 500
  h1+h2
    margin-top: -0.5rem
  h2+h3
    margin-top: -1rem
  h3+h4
    margin-top: -1rem
  h4+h5
    margin-top: -1rem
  h5+h6
    margin-top: -1rem

// a
article.md
  p>a
    &:not([class])
      font-weight: 500
      &:hover
        text-decoration: underline

article.md p
  font-size: $fs-p

// code
article.md code
  -webkit-font-smoothing: auto
  -moz-osx-font-smoothing: auto
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  color: var(--text-code)
  font-family: $ff-code
  word-break: break-all
  font-size: 85%
  background: var(--block)
  padding: .2em .4em
  border-radius: 4px
article.md pre
  -webkit-font-smoothing: auto
  -moz-osx-font-smoothing: auto
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%

// div
article.md>div
  margin: 1rem 0
// blockquote
article.md blockquote
  margin: 1rem 0
  padding: 1rem
  background: var(--card)
  border-left: 4px solid $color-theme
  border-radius: $border-block
  color: var(--text-p2)
  box-shadow: $boxshadow-card
  p
    margin: 0.5em 0
    font-size: $fs-14


article.md img
  border-radius: 4px
  margin: auto
  display: block