/*
//    WHISPER.css
//  ===============
//
//  --var-font-*-*
//
*/

aside>div,
.whisper
{
    margin-top: -7.5vh;   /* meh, a hack,  */
    position: relative;     /* Kev, this is needed, you've tried to remove it 7 times, ya fanny! Don't!! */
    min-height: 300px;
    height: 70vh;
    font-size: var(--var-font-size-whisper);
    font-weight: bold;
    padding:20rem 0rem;

    letter-spacing: -0.1rem;
    word-spacing: 0.5rem;
    line-height: 1.2;    

    xxbackground-color: var(--color-green-light, 'lightgreen');
    xxbackground-color: var(--colour-tw-neutral-050);
}

    /*
        This is just container-xxl
    */
    .whisper>div,
    aside>div>div
    {
        max-width: 1320px;
        width: 100%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        margin-right: auto;
        margin-left: auto;    
    }



.flexbox-centered-layer,
.whisper>div>p,
aside>div>div>p
{
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: absolute;
    z-index: auto;
    top: 0px;
    left: 0px;
    height: 100%; 
    width:100%;
    text-align: center;

    color: var(--color-green-accent, 'green');
    color: var(--colour-tw-gray-100, red);
    


    font-size: 2.25rem;
    line-height: 1.5;
    letter-spacing: normal;

    font-size: calc(var(--var-font-size-h4) * 1.15); 


    font-family: 'Poppins-700';
    font-size: calc(var(--var-font-size-h3) * 1.3); 
    letter-spacing: -2px;
    line-height: 1.25;
    color: var(--colour-tw-gray-300, red);    
    font-display: swap;

} 

.layer-position-top-left
{

}

.whisper span{
    display: block;
}