body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
        

        p {

        }
        
nav {
    background: darkblue;
    backdrop-filter: blur(10px);
    padding: .2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* gray */
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Important: Remove or reduce 'gap' property for main nav items if they are parents of dropdowns.
       The default 'gap: 2rem;' on nav ul can cause issues with dropdown positioning if not handled.
       We'll define padding/margin on the individual li instead.
    */
    /* gap: 2rem; */ /* COMMENT OUT or REMOVE this line */
}

/* Ensure each top-level li has proper spacing and relative positioning */
nav ul li {
    position: relative; /* Crucial for dropdown positioning */
    padding: 0 1rem; /* Add some padding/spacing between top-level items */
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: 400;
    padding: 0.1rem 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: block; /* Make the whole link area clickable */
}

/* all <a> elements that are a descendant of a <nav> element */
nav a:hover {
    background-color: rgba(255,255,255,0.3);
    color: #df80ff;
    color: aqua;
	/* text-decoration: underline; */
}


nav ul li > a {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none; /* Avoid border pushing things down */
}

/* --- Dropdown Menu Specific Styles --- */

.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute; /* Position relative to the parent li */
    top: 100%; /* Place directly below the parent link */
    left: 0;
    background-color: rgba(200, 200, 200, .9); /* Slightly darker or different for contrast */
	background-color: darkblue; /* gray */
    backdrop-filter: blur(8px);
    min-width: 180px; /* Minimum width for the dropdown */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 1001; /* Ensure it appears above other content */
    list-style: none;
    padding: 0;
    margin: 0; /* Remove default ul margin */
    border-radius: 0 0 5px 5px; /* Rounded corners only at the bottom */
    border: 1px solid rgba(255,255,255,0.05); /* Subtle border */
}

.dropdown-menu li {
    width: 100%; /* Ensure each list item takes full width of the dropdown */
    padding: 0; /* Remove padding from list items within dropdowns */
}

.dropdown-menu li a {
	color: white; /* Keep text color consistent with nav */
    padding: 2px 2px; /* Adjust padding for dropdown items */
    white-space: nowrap; /* Prevent text from wrapping */
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Separator lines */
}

.dropdown-menu li:last-child a {
    border-bottom: none; /* No border for the last item */
}

.dropdown-menu li a:hover {
    background-color: rgba(255,255,255,0.3); /* Slightly more prominent hover */
    color: #df80ff;
    color: aqua;
	 /* text-decoration: underline; */
}

/* Show the dropdown menu on hover */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Sub-menu specific positioning */
.dropdown-submenu .dropdown-menu {
    left: 100%; /* Position the sub-menu to the right of its parent */
    top: 0; /* Align top with parent item */
    border-radius: 5px; /* All corners rounded for sub-menu */
    border-left: 1px solid rgba(255,255,255,0.05); /* Visual separator */
}

/* Show sub-menu on hover */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

        @media (max-width: 768px) {
            nav ul {
                flex-direction: column;
                align-items: center;
                gap: 0rem;
            }
        }