#headerNavigation {
    font-weight: normal;
}

#headerNavigation ul[role=menubar] {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    max-width: 58em;
}

#headerNavigation a[role=menuitem] {
    display: inline-flex;
    padding: 6px 15px 5px 15px;
    color: #32053e;
    border: 1px solid;
    border-color: #CBCBCB;
    border-radius: 6px 6px 0px 0px;
    background: #E9E9E9;
}

.menubarItem {
    display: flex;
}

@media (max-width: 36em) {
    #headerNavigation ul[role=menubar] {
        flex-direction: column;
    }

    #headerNavigation a[role=menuitem] {
        max-width: none;
        flex: 1;
    }
    #headerNavigation li:nth-child(-n+3) a[role=menuitem] {
        border-radius: 6px;
    }
}

#headerNavigation a[role=menuitem].active {
    border: 2px solid;
    border-color: #D090DF;
    background: #EDD8F2;
    font-weight: bold;
}

#headerNavigation a[role=menuitem]:hover,
#headerNavigation a[role=menuitem]:focus {
    background: #dda1ee;
    border-color: #D090DF;
}

@media (prefers-color-scheme: dark) {
    #headerNavigation a[role=menuitem] {
        color: #f7f7f7;
        //color: rgb(221, 161, 238);
        background: #333;
        border-color: #555;
    }

    #headerNavigation a[role=menuitem].active {
        background: #490b5a;
    }


    #headerNavigation a[role=menuitem]:hover,
    #headerNavigation a[role=menuitem]:focus {
        background: #6c0a87;
    }
}