header {
    grid-area: header;
    text-align: center;
    border-bottom: 1px solid var(--dark2);
}

@media (max-width: 700px) {
    header nav ul {
        flex-direction: column;
        align-items: center; /* Optional: center items vertically */
        gap: 10px; /* Optional: add spacing between items */
    }
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* 👈 Makes the list items horizontal */
    justify-content: space-around; /* Optional: centers nav items */

}



header nav a {
    text-decoration: none;
    color: var(--dark2);
    font-family: menutext;
    font-size: 14px;
    transition: transform 0.2s ease-in-out; /* Smooth scaling */
    display: inline-block; /* Needed for transform to work properly */
}

header nav a:hover {
    transform: scale(1.1); /* Increases size by 10% */
}