@import '_vars'
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')

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

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
        background: $primary-soft

main p
    opacity: 0.9

img
    display: block
    max-width: 100%

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

blockquote
    margin-left: 0
    padding: 0.6rem 1rem
    border-left: 5px solid $accent
    opacity: 0.8
    background: $secondary

    &.warning
        border-left-color: $warn

code
    font-family: 'Courier New', Courier, monospace

p, p *, main ul
    line-height: 32px

: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