:root {
    /* Define these in your main CSS file (e.g., norms.css or styles.css) */

    --primary-color: #4a90e2;   /* Example value (adjust as needed) */
    --hover-bg: #e0eaf6;       /* Example value (adjust as needed) */
    --transition-speed: 0.4s;  /* Example value (adjust as needed) */

    /* Optional: Define a darker primary color for hover states */
    /* --primary-color-dark: #357abd; */
}

header {
    background: linear-gradient(90deg, #06c0e6, #14dee2); /* Shiny gradient */
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
/* --- Navigation Styles --- */
.main-nav {
    background-color: #fff; /* Change background to white */
    border-radius: 8px; /* Apply border-radius to all corners */
    margin-bottom: 35px; /* Increase space below nav */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Slightly stronger shadow */
    padding: 0.75rem 0; /* Increase vertical padding */
    text-align: center;
    position: relative; /* Optional: for potential pseudo-elements */
    overflow: hidden; /* Ensure nothing spills out */
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.main-nav li {
    display: inline-block;
    margin: 0 5px; /* Reduce margin between items slightly */
}

.main-nav a {
    /* Reference variables defined in norms.css or styles.css */
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500; /* Slightly bolder */
    padding: 10px 18px; /* Increase padding */
    border-radius: 6px; /* Slightly larger radius */
    transition: background-color var(--transition-speed, 0.4s) ease, color var(--transition-speed, 0.4s) ease, transform 0.2s ease;
    display: inline-block; /* Needed for transform */
    position: relative; /* For potential underline effect */
}

.main-nav a:hover,
.main-nav a:focus {
    /* Reference variables defined in norms.css or styles.css */
    background-color: var(--hover-bg);
    color: var(--primary-color); /* Keep text color */
    transform: translateY(-1px); /* Subtle lift on hover */
    outline: none;
}

/* --- Navigation Active State --- */
.main-nav a.active {
    /* Reference variables defined in norms.css or styles.css */
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}
.main-nav a.active:hover {
     background-color: #357abd; /* Slightly darker primary on hover for active link */
     /* Consider using a variable if you define a darker primary color */
}

/* Footer Styles */
footer {
    background: linear-gradient(90deg, #06c0e6, #14dee2); /* Consistent gradient */
    color: white; /* Consistent text color */
     margin-top: 40px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2); /* Consistent shadow */
    width: 100%; /* Ensure footer spans full width */
    text-align: center;
    padding: 20px 0;
}

footer a {
    display: inline-block; /* Make the link fill the footer */
    color: inherit; /* Inherit text color from footer */
    text-decoration: none; /* Remove underline */
    transition: text-shadow 0.3s ease; /* Smooth transition for text glow only */

}

footer a:hover,
footer a:focus {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* White text glow on hover/focus */
    text-decoration: underline;
    outline: none; /* Remove focus outline if desired */
}

footer p {
    font-size: 1.1em;
    margin: 0; /* Remove default paragraph margin */
    color:white
}