main,
header {
    background-color: var(--secondary-color-light);
}

main {
    border: clamp(1rem, 1.5vw, 2rem) var(--quaternary-color-text) solid;
    border-top: none;
}

#small-plates,
#wine-beer-menu,
.allergenNotice,
.dietaryOptionsList .dietaryOption {
    color: var(--quaternary-color-text);
}

.menuNav-container,
.menuNav-container.sticky{
    background-color: var(--quaternary-color-text);
}

.menuNav-item.selected,
.menuNav-item:not(.selected):hover {
    background-color: var(--secondary-color);
}

.menuNav-container .menuNav .menuNav-item a:hover,
.menuNav-container .menuNav .menuNav-item:not(.selected):hover a,
.menuNav-container .menuNav .menuNav-item.selected a,
.menuNav-container .menuNav .menuNav-item.selected a:hover
 {
    color: var(--quaternary-color-text);
} 

#small-plates .itemDietary img,
.dietaryOptionsList .dietaryOption img {
    filter: brightness(0) saturate(100%) invert(49%) sepia(10%) saturate(2013%) hue-rotate(321deg) brightness(95%) contrast(92%);
}

#small-plates .sub-title {
    color: var(--quaternary-color-text);
    font-size: 1em;
    font-style: italic;
}

#small-plates .title-line,
#wine-beer-menu .title-line {
    background-color: var(--quaternary-color-text);
}

#small-plates .sub-title-line {
    height: 1px;
    background-color: var(--quaternary-color-text);
    border-radius: 10px;
}

#wines .menu-item {
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
        "item itemPrice itemPrice2 itemPrice3";
    margin-bottom: 1.3rem;
}

#wines .measure-title {
    font-weight: bold;
}

#wines .measure-price {
    text-align: right;
}

@media (min-width: 640px) {
    .menu-grid {
        grid-template-columns: minmax(360px, 1fr);
    }
}