@use '../abstracts/palette' as c
@use 'sass:color' as brush
@forward '../abstracts/fonts'
@forward '../components/cblocks'

::selection
    background-color: c.$state
    color: c.$bg

html
    background-color: c.$canvas
    background-image: url("images/rocky_wall.png")

header
    border-bottom: 5px solid c.$state
    margin-bottom: 1rem

    & h1
        font-family: headerTitle
        text-align: center
        font-size: clamp(16pt, 3vw, 72pt)

    & nav
        text-align: center
        font-family: navFont
        font-size: clamp(16pt, 1.5vw, 24pt)
        margin: 6%

        & > a
            padding: 3%
            margin: 3%

body
    color: c.$fg
    /* line-height: 1.5 */
    /* margin: 1rem */
    margin: 0 auto
    // min-width: 33vw
    width: 50vw
    max-width: 900px

    & main
        background-color: rgba(c.$bg, 0.7)
        border-radius: 2%

.directory
    padding: 3% 5%

@keyframes rise-and-shine
    0%
        top: 0vh
    100%
        top: -15vh

@keyframes morningside
    0%
        background: radial-gradient(circle at 15vw, c.$bg 60%, c.$accent)
    100%
        background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)

.black-hole.wrap
    z-index: -1
    position: absolute
    top: -15vh
    text-align: center
    filter: drop-shadow(-5px 4px 20px rgba(c.$accent, 0.5))
    animation: rise-and-shine 5s ease-out

    & #black-hole
        width: 50vw
        max-width: 900px
        height: 50vw
        max-height: 900px
        margin: 0 auto
        shape-outside: circle(50%)
        clip-path: circle(45vw)
        background-color: c.$bg
        border-radius: 50%
        background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)
        animation: morningside 5s ease-in
        transform: rotate(-90deg)

#page #title
    font-family: postTitle
    margin-left: 1.5vw

#content.page
    font-family: pageFont
    font-size: clamp(10pt, 1.5vw, 18pt)
    margin: 5% 15% 0
    padding: 5% 0 5%

.expo > #title
    padding-top: 0px

#posts
    padding: 3% 10%

    & > a
        &:has(.post)
            display: block
            transform: rotate(0deg)

            & > .post
                box-shadow: none
                border: 1px solid rgba(brush.adjust(c.$state, $red: 50), 0.5)
                transition: box-shadow 3s

                & > p
                    color: c.$fg
                    font-family: postContent
                    font-size: clamp(10pt,1.4vw, 18pt)
                    margin: 2% 0
                
                & > h2
                    // color: c.$state
                    font-size: clamp(14pt, 2.5vw, 20pt)
                    font-weight: 900
                    margin: 0

                &:hover
                    box-shadow: inset 0 2px 16px brush.adjust(c.$state, $red: 95)

            &:nth-child(even)
                transform: rotate(3deg)
                transition: transform 2s

            &:nth-child(odd)
                transform: rotate(-3deg)
                transition: transform 2s

            &:hover
                transform: rotate(0deg)

.post
    background-image: linear-gradient(to top right, rgba(c.$bg, 1.0), rgba(brush.adjust(c.$bg, $lightness: 22%), 0.1))
    // border: 1px solid c.$accent
    font-family: postTitle
    padding: 3%
    margin: 2% 0
    border-radius: 4%

#post
    font-family: postTitle

    & #content
        margin: 0 10%
        font-family: postContent
        font-size: clamp(12pt, 1.8vw, 18pt)

        & img
            filter: saturate(0) contrast(1.75)

        & > img, & > p > img
            margin: 2% auto
            max-width: 75%
            height: auto
            display: block
            border-top: 12px
            border-right: 12px
            border-left: 12px
            border-bottom: 48px
            border-color: #fff
            border-style: solid
            border-radius: 1%

        & > img:nth-child(even), & > p > img:nth-child(even)
            transform: rotate(2deg)

        & > img:nth-child(odd), & > p > img:nth-child(odd)
            transform: rotate(-2deg)

        & > p:first-child::first-letter
            font-family: postFirstChar
            font-size: clamp(64pt, 3vw , 86pt)
            float: left
            color: c.$state

        & figure
            display: flex
            flex-flow: column nowrap
            margin: 2% auto
            max-width: 50%
            height: auto
            border-top: 12px
            border-right: 12px
            border-left: 12px
            border-bottom: 24px
            border-color: #fff
            border-style: solid
            border-radius: 1%
            background-color: #fff
            text-align: center

            & img
                width: 100%

            & figcaption
                max-height: 10vh

                & > p
                    margin-top: 0
                    margin-bottom: 0
                    color: c.$bg
                    font-family: postMatter
                    font-size: clamp(9pt, 1.5vw, 14pt)
                    text-align: justify

    & h1:first-child
        text-align: center
        font-size: clamp(16pt, 24pt, 32pt)
        color: c.$accent
        font-weight: bold

    & #frontmatter
        width: 33%
        margin: 0 0 0 auto
        padding: 1%
        font-family: postMatter

    & .terms
        max-width: 66%
        margin: 25px auto 0
        text-align: center

        &#label
            text-decoration: underline
        
        &#directory
            font-family: postMatter
            padding: 2% 0 4%

        & li
            display: inline-block
            margin: 0.5%
            font-weight: bold

            & a
                display: block
                padding: 5px
                background-color: c.$accent
                color: c.$bg
                text-decoration: none
                border-radius: 5px
                transition: background-color 3s

                &:hover
                    background-color: c.$state

.page.category
    & > div
        display: flex
        flex-flow: row nowrap
        justify-content: space-evenly

        & > h1
            font-family: catTerm
            flex-basis: 33vw
            font-size: clamp(16pt, 1.3vw, 24pt)

        & > p
            font-family: pageFont
            margin-left: 10%
            margin-right: 5%
            max-height: 15vh
            overflow-y: scroll

    & > img
        max-width: 100%
        filter: saturate(0) contrast(1.75)

#categories.expo
    & > h1
        font-family: catTerm
        font-size: clamp(24pt, 2vw, 32pt)

#categories.directory
    padding-top: 0px

    & > .category
        min-height: 66px
        background-position-y: 34%
        background-size: cover
        background-blend-mode: saturation
        filter: contrast(1.3)

        & > h2
            text-shadow: 2px 2px 5px c.$bg
            font-family: catTerm

            & + p
                display: none

        &:hover > h2 + p
            display: initial
            text-shadow: 2px 2px 5px c.$bg
            font-family: pageFont

.page.tag
    & > h1
        font-family: postMatter
        font-size: clamp(24pt, 2vw, 32pt)

#tags.expo
    & > h1
        font-family: postMatter
        font-size: clamp(24pt, 2vw, 32pt)

#tags.directory
    padding-top: 0px

    & > dl
        display: flex
        flex-wrap: wrap
        justify-content: center
        align-items: center
        align-content: space-around
        gap: 3%

    & .tag.title
        font-family: postMatter
        font-weight: bold
        font-size: clamp(12pt, 1.5vw, 16pt)
        // float: left
        background-color: c.$accent
        cursor: pointer

        & > a
            padding: 5px
            background-color: c.$accent
            color: c.$bg
            text-decoration: none
            border-radius: 5px

        &:hover + .tag.content::after
            // content: "Lorem ipsum"
            display: inline-block
            position: absolute
            z-index: 1
            max-width: 10vw
            max-height: 15vh
            overflow: scroll
            background-color: c.$state
            color: c.$bg

    // & .tag.content
    //     visibility: collapse

footer
    border-top: 1px solid c.$state
    margin-top: 1rem
    font-family: postMatter
    font-size: 14pt

a
    color: c.$accent
    text-decoration: none