// Default theme for OnlyLegs by FluffyBean
// Mockup link: https://www.figma.com/file/IMZT5kZr3sAngrSHSGu5di/OnlyLegs?node-id=0%3A1

@import "variables"
@import "animations"

@import "components/notification"
@import "components/pop-up"
@import "components/upload-panel"
@import "components/tags"

@import "components/navigation"
@import "components/banner"
@import "components/gallery"

@import "components/buttons/top-of-page"
@import "components/buttons/info-button"
@import "components/buttons/pill"
@import "components/buttons/block"

@import "components/image-view/view"

// Reset
*
    box-sizing: border-box
    font-family: $font

    scrollbar-color: RGB($primary) transparent

    ::-webkit-scrollbar
        width: 0.5rem
    ::-webkit-scrollbar-track
        background: RGB($bg-200)
    ::-webkit-scrollbar-thumb
        background: RGB($primary)
    ::-webkit-scrollbar-thumb:hover
        background: RGB($fg-white)

html, body
    margin: 0
    padding: 0

    min-height: 100vh
    max-width: 100vw

    background-color: RGB($fg-white)

    scroll-behavior: smooth
    overflow-x: hidden

.wrapper
    margin: 0
    padding: 0 0 0 3.5rem

    min-height: 100vh

    display: flex
    flex-direction: column

    background-color: RGB($bg-bright)
    color: RGB($bg-100)

.big-text
    height: 20rem

    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    color: RGB($bg-100)

    h1
        margin: 0 2rem
        
        font-size: 4rem
        font-weight: 900
        text-align: center

    p
        margin: 0 2rem

        max-width: 40rem
        font-size: 1rem
        font-weight: 400
        text-align: center

.error-page
    width: 100%
    height: 100vh

    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    background-color: RGB($bg-bright)

    h1
        margin: 0 2rem
        
        font-size: 6.9rem
        font-weight: 900
        text-align: center

        color: $primary

    p
        margin: 0 2rem

        max-width: 40rem
        font-size: 1.25rem
        font-weight: 400
        text-align: center

        color: $fg-black


@media (max-width: $breakpoint)
    .wrapper
        padding: 0 0 3.5rem 0

    .big-text
        height: calc(75vh - 3.5rem)

        h1
            font-size: 3.5rem

    .error-page
        height: calc(100vh - 3.5rem)

        h1
            font-size: 4.5rem

        p
            max-width: 100%
            font-size: 1rem