/*
 * Navigation Set up
 */
 nav {
    z-index: 999;
    top: 0;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: space-between; /* Ensures proper spacing */
    align-items: center;
    padding: 10px 20px; /* Adds better spacing */
    background-color: var(--black); /* Ensures visibility */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Creates slight elevation */
}

/*
 * All Nav divisions
 */
nav div {
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

/* Navigation links */
nav a {
    text-decoration: none;
    color: var(--color2-secondary);
    font-size: 16px;
    transition: color 0.3s ease-in-out; /* Smooth hover effect */
}

nav a:hover {
    color: var(--color-main);
    font-weight: bold;
    text-shadow: 0 0 5px var(--color-main); /* Adds a slight glow effect */
}

/*
 * Navigation Items
 */
.nav-item1, .nav-item2, .nav-item3 {
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.nav-item1:hover, .nav-item2:hover, .nav-item3:hover {
    background: rgba(255, 255, 255, 0.1); /* Subtle background effect on hover */
}

/* Responsive Navigation */
@media (max-width: 768px) {
    nav {
        flex-direction: column; /* Stack items for smaller screens */
        align-items: flex-start;
        padding: 10px;
    }

    nav div {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    nav a {
        font-size: 14px;
    }
}