// 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/context-menu"
@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/pill"
@import "components/buttons/block"

@import "components/image-view"
@import "components/settings"

*
    box-sizing: border-box
    scrollbar-color: var(--primary) transparent
    font-family: var(--font-family)

    ::-webkit-scrollbar
        width: 0.5rem
    ::-webkit-scrollbar-track
        background: var(--background-200)
    ::-webkit-scrollbar-thumb
        background: var(--primary)
    ::-webkit-scrollbar-thumb:hover
        background: var(--foreground-white)

html
    margin: 0
    padding: 0
    scroll-behavior: smooth

body
    margin: 0
    padding: 0 0 0 3.5rem

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

    display: grid
    grid-template-rows: auto 1fr auto

    font-family: var(--font-family)

    background-color: var(--background-100)
    color: var(--foreground-white)

    overflow-x: hidden
@media (max-width: var(--breakpoint))
    body
        padding: 0 0 3.5rem 0

main
    margin: 0 0.5rem 0.5rem 0
    padding: 0.5rem
    display: flex
    flex-direction: column
    position: relative
    background: var(--background-800)
    color: var(--foreground-black)
    border-radius: var(--rad)
    overflow: hidden
@media (max-width: var(--breakpoint))
    main
        margin: 0 0.5rem
        // border-radius: 0

.error-page
    min-height: 100%

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

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

        color: var(--primary)

    p
        margin: 0 2rem

        max-width: 40rem
        font-size: 1.25rem
        font-weight: 400
        text-align: center
@media (max-width: var(--breakpoint))
    .error-page
        h1
            font-size: 4.5rem

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