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

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

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

    ::-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
    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

    background-color: RGB($background)
    color: RGB($foreground)

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

main
    display: flex
    flex-direction: column
    position: relative
    background: RGBA($white, 1)
    color: RGB($fg-black)
    border-top-left-radius: $rad
    overflow: hidden
@media (max-width: $breakpoint)
    main
        border-top-left-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: $primary

    p
        margin: 0 2rem

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

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