@use '../palettes/brushes' as hues
@use '../palettes/stylebook' as book

@keyframes fall
    0%
        opacity: 0.0
        transform: rotate(-60deg) scale(2)

    25%
        opacity: 0.3
        transform: rotate(-36deg) scale(1.7)
    
    50%
        opacity: 0.6
        transform: rotate(-12deg) scale(1.3)

    75%
        opacity: 0.9
        transform: rotate(0deg) scale(1)
            
    100%
        opacity: 1.0
        transform: rotate(0deg) scale(1)

@keyframes fadingin
    0%
        opacity: 0.0
        
    100%
        opacity: 1.0
        

#gpg_link
    text-align: center
    margin: 0 auto
    padding: 5%
    border-radius: 2%

    & #pubkey_link h1
        font-size: clamp(16pt, 5vw, 45pt)
        font-weight: bold

    & #pubkey_content
        cursor: pointer
        word-break: break-word
        width: 45%
        padding: 3em 5em 0
        margin: 0 auto
        font-size: clamp(10pt, 2.5vw, 14pt)
        font-weight: bold
        max-height: 33vh
        overflow: scroll
        scrollbar-width: none
        display: none

        &:hover
            display: block

    & a
        color: hues.$border-base-notification

    & image
        box-shadow: 5px 10px 18px hues.$bg-helper-base-color
 
    & svg
        cursor: pointer
        background-color: hues.$fg-helper-base-color
        border-radius: 5%
        animation: fall 0.5s linear

        & g
            fill: hues.$border-base-notification

    & svg:hover + span > #pubkey_content
        display: block
        animation: fadingin 5s ease

/* @media (orientation: landscape) */