/* 1. The Menu Container */
.nav ul {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    padding: 0;
    margin: -5px auto;
    
    /* NO BORDER ON THE UL ITSELF */
    border: none;
    
    background-color: #F5F5F5;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    list-style-type: none;
    text-align: center;
}

/* 2. The Menu Items */
.nav li {
    display: table-cell;
    
    /* ONLY DRAW TOP AND BOTTOM BORDERS */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    
    /* DRAW LEFT BORDER FOR DIVIDERS */
    border-left: 1px solid #000;
    
    border-right: none;
    text-align: center;
    vertical-align: middle;
}

/* 3. REMOVE THE LEFT BORDER FROM THE FIRST ITEM */
/* This prevents it from doubling up with the Container's left border */
.nav li:first-child {
    border-left: none;
}

/* 4. The Links */
.nav li a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
    line-height: normal;
}

.nav li {
    background-color: transparent; /* Shows the container gradient */
    transition: background-color 0.3s; /* Smooth fade effect */
}

.nav li:hover {
    background-color: #ead1dc; /* Turns green when you hover */
    cursor: pointer;
}

.container {
    /* Fades from White to Vintage Sage */
    background: linear-gradient(to bottom, #ffffff, #46B57A);
    margin: 1px;
    text-align: center;
    border: 1px solid black;
    padding: 4px 0;
}

.logo {
    /* Makes the white parts transparent so the pink shows through */
    mix-blend-mode: multiply; 
    /* Ensure the image itself is block so it sits well */
    display: block;
    margin: 0 auto;
}