/* Formatting the footer --------------------------*/
.footer{
    background-color: var(--uiucBlue);
    padding: 0px calc(1.5 * var(--pad));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch; 
    gap: calc(1.5 * var(--gap)); 
}
.footerTextContainer{
    flex: 0 0 75px;
}
.footerNavigationContainer{
    flex: 10 1 200px;
}
.footerTextContainer{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--nav-fs);
    font-family: var(--nav-ff);
    color: var(--nav-tc);
}
.footerNavigationContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.footerNavigationButton{
    flex: 1 0 25px;
    border-radius: calc(0.5*var(--bdr-rad));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(0.25*var(--pad));
}
.footerIcon{
    @media screen and (max-width: 800px){
        --fac-icon: 0.8;
    }
    @media screen and (max-width: 500px){
        --fac-icon: 0.6;
    }
    width: auto;
    height: calc(var(--fac-icon,var(--fac-def))*25px);
}
.footerNavigationContainer a:hover {
    background-color: #FFFFFF2F;
}