.topHeader {
    background-color: var(--secondary-color); 
    padding: 16px 0px; 
}


.topHeader ul{
    list-style-type: none;
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: row;
    justify-content: space-between; 
    align-items: center;
}


.topHeader .topHeaderNavMenu a {
    font-family: var(--title); 
    font-size: var(--bodyFontSize); 
    font-weight: 500;
    padding: 8px;
    line-height: 1.57; 
    letter-spacing: 0.8px; 
    border-radius: 4px; 
}


.topHeader a { 
    color: var(--primary-color); 
    font-size: var(--navFontSize); 
    font-family: var(--label); 
    font-weight: 300; 
    text-decoration: none; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    border: none;
}



/* Navigation menu link hover and active states */
.topHeader .topHeaderNavMenu a:hover, 
.topHeader .topHeaderNavMenu a:active {
    background-color: #F8F9FA;
    font-family: var(--title); 
    font-size: var(--bodyFontSize);
    font-weight: 600;
}

/* General header and footer link hover/active states */
.topHeader a:hover, 
.topHeader a.active {
    font-weight: 600; 
    text-decoration: none; 
} 

/* Header navigation images */
.topHeader li img {
    width: 30px ; 
    height: 30px;
    padding-bottom: 5px; 
    border: none;
}