:root 
    {
        CORNER-SHAPE: SUPERELLIPSE(0.5);
        --main-bg-color: #151820;
        --main-bg-color-alt: #262A3A;
        --main-txt-color: rgb(255 165 29);

        --header-bg-image: url(/img/hubHeaderMobile.svg);
        --footer-bg-image: url(/img/hubFooterMobile.svg);
        --header-height: 17.657vh;
        --footer-height: 14.685vh;

        --hub-kai-no-glow: url(/img/kaiHubMobile.svg);
        --hub-monarchs-no-glow: url(/img/momHubMobile.svg);
        --hub-vanne-no-glow: url(/img/vanHubMobile.svg);
        --hub-kai-glow: url(/img/KaiHub.svg);
        --hub-monarchs-glow: url(/img/MomHub.svg);
        --hub-vanne-glow: url(/img/VanHub.svg);
        --image-site-title: img/hubTitle.svg;

        --title-width: calc(0.59152777777 * var(--main-width));
        --title-height: calc(.11574 * var(--main-height));
        --title-offset-x: calc(0.20425925925 * var(--main-width));
        --title-offset-y: calc(0.15138020833 * var(--main-height));
        --site-buttons-container-width: calc(0.44546296296 * var(--main-width));
        --site-buttons-container-height: calc(0.46651041666 * var(--main-height));

        --site-buttons-container-offset-x: calc(0.27726851851 * var(--main-width));
        --site-buttons-container-offset-y: calc(0.24942708333 * var(--main-height));
        --site-button-width: calc(.23291666666 * 100vw);
        --site-button-height: calc(.10958333333 * 100vh);
        }


    .topnav {
        font-size: 14px;
    }

    .lead {
        font-size: 18px;
        font-weight: 400;
    }




    #site-buttons{
        object-fit: fill;
        display: inline-flex;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        justify-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        width: var(--site-buttons-container-width);
        height: var(--site-buttons-container-height);
        transform-origin: top left;
        bottom: var(--site-buttons-container-offset-y);
        transform: translate(var(--site-buttons-container-offset-x), var(--site-buttons-container-offset-y));
        position: relative;
    }

    #site-buttons img{
        aspect-ratio: var(--site-button-width) / var(--site-button-height);
        object-fit: fill;
        justify-self: center;
        align-self:  center;
        width: var(--site-button-width);
        height: var(--site-button-height);
    }

    .hub-button{
        /* object-fit: cover; */
        background-image: url(/img/hubWindow.svg);
        background-repeat: no-repeat;
        background-size: var(--site-button-width) auto;
        background-position: center;
        /* clip-path: url(/img/hubWindow.svg); */
        cursor:url(/img/cursor.png) 0 0, auto;
        width:var(--site-button-width);
        height:var(--site-button-height);
        flex-direction: column;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        border-radius: 10px;
        margin: 1px;
        text-indent: -999px;
        border: 25px;
        margin: 2px;
        flex-wrap: nowrap;
        align-content: center;
    }

    .hub-button:hover{
        filter: drop-shadow(0 0 20px 5px rgba(173, 248, 255, 0.6));
        transition: drop-shadow 0.3s ease-in-out;
    }

    #hub-kai:hover{
        content: url(/img/KaiHub.svg);
        filter: drop-shadow( 0 0 20px 5px rgba(2, 39, 34, 0.6));
        transition: drop-shadow 0.3s ease-in-out;
    }

    #hub-monarchs:hover{
        content: url(/img/MomHub.svg);
        filter: drop-shadow( 0 0 20px 5px rgba(27, 2, 39, 0.6));
        transition: drop-shadow 0.3s ease-in-out;
    }

    #hub-vanne:hover{
        content: url(/img/VanHub.svg);
        filter: drop-shadow( 0 0 20px 5px rgba(39, 2, 12, 0.6));
        transition: drop-shadow 0.3s ease-in-out;
    }

    .hub-button-banner{
        position: relative;
        padding: 5;
        background-position-x: center;
        background-position-y: bottom;
        background-repeat: no-repeat;
        width: 160%;
        height: 29%;
        border-radius: 1.5px;
    }

    .hub-button-banner image{
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .footer {
        width: 100%;
        height: 100%;
        text-align: center;
        padding: 20px 0;
        align-self: flex-end;
    }

    .network-name 
    {
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 2px;
    }

    .content-section-a {
        padding: 50px 0;
        background-color: #f8f8f8;
    }

    .content-section-b {
        padding: 50px 0;
        border-top: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading-spacer {
        float: left;
        width: 200px;
        border-top: 3px solid #e7e7e7;
    }

    .banner {
        padding: 100px 0;
        color: #f8f8f8;
        background: url(../img/banner-bg.jpg) no-repeat center center;
        background-size: cover;
    }

    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
        font-size: 3em;
    }

    .banner ul {
        margin-bottom: 0;
    }

    .banner-social-buttons {
        float: right;
        margin-top: 0;
    }

    p.copyright {
        margin: 15px 0 0;
    }

    a.email-address {
        color: #FFFFFF;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    }

    a.email-address:hover {
        color: #FFFFFF;
    }