:root {
    /*--nav-font: Arial, Helvetica, sans-serif;*/
    /*--nav-height: 6vh;*/

    /* --HX-red: #7C1627;
    --HX-blue: #2D509D;
    --HX-yellow: #BA9E64; */

    --HX-left: #418383;
    --HX-mid: #86A8E7;
    --HX-right: #A6CBCA;
    
/*    --body-font: #212529;
    --heading: #802697;
    --nav-darkblue: #05004a;
    --nav-color: #212529;
    --nav-color-light: #353c42;
    --nav-darkblue: #05004a;*/
}


/* the banner */
.banner {
    margin-top: var(--nav-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*height: calc(50vh - var(--nav-height));*/
    /*width: 100vw;*/
    height: 35vh;
    max-width: 100%;
    width: 100%;
    /*left: 0vw;*/
    font-weight: bold;
    color: white;
    /* background: linear-gradient(to bottom, var(--nav-darkblue), var(--UCLA-blue)); */
    /*background: linear-gradient(180deg, var(--nav-darkblue), var(--UCLA-blue));*/
    background: linear-gradient(135deg, var(--HX-left), var(--HX-mid), var(--HX-right));
    /* background: linear-gradient(, var(--UCLA-darkblue), var(--UCLA-blue) 60%, white); */
    overflow: hidden;
}

#title-icon {
    width: 6.5em;
    margin: 10px;
}

/* used to center the title */
#title-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#title-text {
    font-size: 50px;
}

#subtitle-text {
    font-size: 30px;
    text-align: center;
    line-height: 125%;
    margin: -0.5em;
}

/* change this to adjust the vertical position of the title*/
#title-padding-bottom {
    font-size: 1.5em;
}