/* Main navigation bar styling */
.menu 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--color-menu-background);
display: flex;
flex-direction: column;
z-index: 50;
}

/* Wrapper for the menu items */
.menu-container 
{
display: flex;
justify-content: center;
gap: 0;
height: 60px;
min-height: 60px;
}

/* Individual link/button styling */
.menu-item
{
    display: flex;
    align-items: center; /* Centers text vertically */
    padding: 0 30px; /* Horizontal spacing inside the button */
    height: 100%; /* Takes up the full height of the bar */
    color: var(--color-text);
    text-decoration: none; /* Removes underline from links */
    transition: background-color 0.3s; /* Smooth color change on hover */
}

/* Hover effect for buttons */
.menu-item:hover 
{
    background-color: var(--color-primary);
    color: white;
}

/* Style for the currently selected page */
.menu-item.active 
{
    background-color: var(--color-primary);
    color: white;
}