@use '../palettes/animations' as motion
@use '../palettes/typewriters' as typo
@use '../palettes/stylebook' as book
@use '../palettes/brushes' as hues

@keyframes breathe_one
    @include motion.dilating-expanding(15vw, 15vh)

@media (orientation: portrait)
    @keyframes breathe_two
        @include motion.dilating-expanding(30vw, 30vh)

#banner
    text-align: center

    #site_nav
        background-color: inherit
        font-size: clamp(10pt, 1vw, 16pt)

    #site_title
        font-size: clamp(12pt, 2vw, 64pt)

@media (orientation: landscape)
    #banner
        padding: book.$topbottom-framing-pad 0
        
        & #site_logo
            // width: 10vw
            // height: 10vh
            width: 15vw
            height: 15vh

@media (orientation: portrait)
    #banner
        & #site_logo
            // width: 20vw
            // height: 20vh
            width: 30vw
            height: 30vh


        & #site_title
            position: relative
            bottom: 3vh

@media screen
    #banner #site_title
        transition: letter-spacing 1s, margin-bottom 1s

        &:hover
            letter-spacing: 5pt

    #banner #site_nav > a
        font-weight: bold
        font-family: typo.$sys-message-font
        margin: 1vw
        padding: 10px
        border-radius: 10%

        &:link
            color: hues.$border-helper-base-color

        &:active, &:visited
            background-color: hues.$bg-helper-highlight-color
            color: hues.$border-helper-base-color
            box-shadow: inset book.$shared-shadow-depth hues.$bg-helper-lowlight-color

    @media (orientation: landscape)
        #banner #site_logo
            &:hover, &:active
                animation: breathe_one 4s infinite

    @media (orientation: portrait)
        #banner #site_logo
            &:hover, &:active
                animation: breathe_two 4s infinite

        #banner #site_nav
            margin-top: -3vh
            margin-bottom: 5vh