body{
    display:flex;
    flex-direction: column;
    min-height: 100dvh; /* Dynamic viewport height prevents mobile address bar bugs */

    --sitePad:2em;
    --textColor:#e4e2c8;

    background-color:#000;

    background-image: url('../img/night-bg-darkest.jpg');
    background-size: contain;
    background-position: top left;
    background-repeat: repeat;
    background-attachment: scroll;

    font-family: "EB Garamond", serif;
     font-optical-sizing: auto;
     font-weight: 300;
     font-style: normal;

    color:#e4e2c8;
    font-size:18pt;
}

h1,h2,h3,h4,h5,h6{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -.0425em;
    text-align: left !important;
}

b{font-weight: 800;}
p{
    line-height: 1.5;
    margin-bottom:1em;
    font-size:18pt;
    font-weight: 100;
}
p:last-child{
    margin-bottom: 0;
}
a {
    color:rgb(255, 255, 255);
    font-weight:900;
    text-decoration-thickness: 1px;
    text-underline-offset:2px;

    &:hover{
        color:rgb(125, 150, 255);
    }
}

.btn{
    display: inline-block;
    border-radius: 3px;
    padding:.5em;
    background:#000;
    position: relative;
    z-index: 1;
    color:#fff;
    border:1px solid rgba(255,255,255,.5);
    text-decoration: none;
    font-family: "DM Sans", sans-serif;
    cursor:pointer;

}



.page-title{
    font-size:2.5em;
    margin-top:.5em;
}

#pgTop{
    padding:1em var(--sitePad) 2em;

    .site-title{
        width:100%;
        max-width:50ch;

        img{
            width:100%;
            display: block;
            opacity: .95;
            transition:transform .05s;
            transform-origin: bottom left;

            &:hover{
                transform: scale(1.025);
                opacity: .8;
            }
        }

    }
}



#pgBody{
    margin: 0 var(--sitePad) 3em;
    flex: 1 0 auto; /* grow to fill space, never shrink, baseline auto */
    max-width: 50ch;

    section > *{
        text-shadow: 0 0 25px rgba(0,0,0,0.9);
    }

}

#pgBottom{
    flex-shrink: 0;
    width:100%;
    img{
        display: block;
        width:100%;
    }
}


#stickyTop{
    position: sticky;
    top:0;
    z-index:5;

    ul{
        display: flex;
        flex-flow:row wrap;
        gap:.5em;
        justify-content: flex-start;
        align-items: start;
        padding:.5em var(--sitePad);
        li{
            font-size:16px;
            box-shadow: 0 0px 50px 15px rgba(0,0,0,1);

            a{
                display: block;
                border-radius: 3px;
                padding:.5em;
                background:#000;
                position: relative;
                z-index: 1;
                color:#fff;
                border:1px solid rgba(255,255,255,.5);
                text-decoration: none;
                font-family: "DM Sans", sans-serif;
            }
            a:hover{
                filter:invert();
            }
        }
    }
}




@media (max-width: 1024px) {

    body{
        --sitePad:1em;
    }

    #stickyTop ul{
        padding:.5em;
    }


}