/* Basic reset */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: lightgrey;
}

/* Navigation bar styling */
nav {
    background-color:darkgrey;
    padding: 0.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* This makes the list items horizontal */
    justify-content: center; /* Center the items horizontally */
}

nav ul li {
    position: relative; /* Necessary for positioning the dropdown */
    margin: 0 15px; /* Space between items */
}

nav ul li a {
    color: red;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    display: block; /* Makes the entire link area clickable */
    padding: 10px 15px; /* Adds padding inside the links */
}

nav ul li a:hover {
    background-color: #555; /* Background color on hover */
    border-radius: 4px; /* Rounded corners */
}

/* Dropdown styling */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    list-style: disc;
    padding: 0;
    margin: 0;
    top: 100%;
    left: 0;
    width: 200px; /* Adjust width as needed */
    z-index: 1;
}

.dropdown-content li {
    margin: 0;
}

.dropdown-content li a {
    padding: 10px 15px;
    display: block;
    color: white; /* Ensure text is visible */
}

.dropdown-content li a:hover {
    background-color: #555;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}