.h3
    font-size: var(--font-size-md)
    font-weight: bold
    margin-bottom: 2rem

.hr
    border: 0
    height: 0
    margin-top: 7rem
    margin-bottom: 7rem

.ul,
.ol
    margin-bottom: 3rem

.ol
    list-style: none
    counter-reset: ul

    .li
        margin-left: 0.5rem

        &:before
            margin-right: 1rem
            font-weight: bold
            counter-increment: ul
            content: counter(ul) ". "

.li
    margin-left: 2rem

.code
    background: var(--color-background-code)
    padding: 2px 5px
    border-radius: var(--border-radius)

    pre &
        background: var(--color-subtle-light)

\:global
    pre code
        background: var(--color-subtle-light)

    p code, li code
        background: var(--color-background-code)
        padding: 2px 5px
        border-radius: var(--border-radius)

    abbr[title]
        cursor: help
        border-bottom: 2px dotted var(--color-theme)
        text-decoration: none
        position: relative

@media(max-width: 767px)
    \:global abbr[title]
        border-bottom: none
        cursor: initial

        &:after
            content: " (" attr(title) ")"
            color: var(--color-subtle-dark)
            font-style: italic
