@import 'variables'
@import 'buttons'
@import 'base'
@import 'wave'
@import 'bubbles'

@font-face
    font-family: 'Inter'
    src: url("@/assets/fonts/Inter-Regular.ttf")

@font-face
    font-family: 'Vampire'
    src: url("@/assets/fonts/Vampire.ttf")
*
    box-sizing: border-box
body
    background-color: #2D2D2D
    color: $white
    font-family: 'Inter', sans-serif
    &.sideoutpanel-open
        &:not(.mobile)
            overflow-y: hidden
            padding-right: 10px
            .navbar
                padding-right: 10px

html
    font-size: var(--font-size-main)

body
    margin: 0
    padding: 0
#app
    display: flex
    flex-direction: column
    height: 100vh
    .footer
        margin-top: auto

.container
    margin-right: auto
    margin-left: auto
    padding-right: 16px
    padding-left: 16px
    // &.container--variant1
    //     @media (min-width: 992px)
    //         max-width: 800px
    //         padding: 24px 64px
    @media (min-width: 992px)
        max-width: 640px

h1
    font-weight: 700
    font-size: 40px
    text-align: center
    @media (min-width: 992px)
        font-size: 60px
    @media (min-width: 1200px)
h2
    font-size: 40px
    font-weight: 200
    @media (min-width: 992px)
        font-size: 40px
h3
    font-size: 32px
    font-weight: 200
    @media (min-width: 992px)
        font-size: 40px
.page-head
    margin-bottom: 80px
.page-body
    margin-bottom: 160px

p,a
    word-wrap: break-word