@import '_vars'

html
    scroll-behavior: smooth

body
    background-color: $background

nav, main, footer
    max-width: $main-width
    margin: 0 auto

*, *::before, *::after
    box-sizing: border-box
    border: none
    color: $text
    font-family: 'Inter', sans-serif

a
    text-decoration: none

h1, h2, h3
    &, *
        font-weight: 700
        line-height: 3rem
        font-family: 'Syne', sans-serif

h2
    &, *
        line-height: 2.2rem

h3
    &, *
        line-height: 1.5rem

main a
    text-decoration: underline
    text-decoration-color: $primary
    text-underline-offset: 2px
    text-decoration-thickness: 5px

    transition: 0.2s

    &:hover
        text-decoration-thickness: 0
        background: $primary-glow

main p
    opacity: 0.9

img
    display: block
    max-width: 100%

mark
    color: $text
    background: $primary
    padding: 5px 7px
    border-radius: 5px

kbd
    font-family: 'Courier New', Courier, monospace
    font-weight: 600
    background: $secondary
    border-radius: $edge
    padding: 0.2rem 0.4rem
    border-bottom: 3px solid $secondary-dark

blockquote
    margin-left: 0
    padding: 1rem 1rem
    border-left: 5px solid $accent
    opacity: 0.8
    background: $secondary
    width: 100%
    border-radius: $edge

    &.error
        border-left-color: $error
    &.warning
        border-left-color: $warn
    &.success
        border-left-color: $success

code
    font-family: 'Courier New', Courier, monospace
    font-weight: 600
    background: $secondary
    border-radius: $edge
    padding: 0.2rem 0.4rem

pre code
    *, &
        font-weight: normal

p, p *, ol, ul, li
    line-height: 32px

h6
    opacity: 0.7
    font-weight: normal

:focus:not(:focus-visible)

    outline: none

.special-gradient
    background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%)
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent

@media (max-width: 900px)
    body
        margin: 0 2rem
        margin-top: 2rem