/* Global Styles */
body { 
    background-color: tan; /* warm tan background */
    font-family: 'Arial', sans-serif; /* simple and modern font */
    color: #333; /* dark text color for readability */
    margin: 0;
    padding: 0;
}

/* Links */
a {
    color: #333; /* default link color */
    text-decoration: none; /* remove underline */
    transition: color 0.3s ease, transform 0.2s ease; /* smooth transition for color and hover effect */
}

a:hover {
    color: rgb(58, 89, 224); /* changes link color on hover */
    transform: scale(1.05); /* subtle zoom effect */
}

/* Navigation Styles */
nav {
    background-color: #333; /* dark background for nav */
    padding: 10px 0; /* vertical padding for spacing */
    display: flex;
    justify-content: center; /* centers nav items */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* soft shadow for depth */
}

nav a {
    color: white; /* text color for links in nav */
    text-decoration: none; /* removes underline */
    padding: 10px 15px; /* clickable area padding */
    display: block; /* makes the anchor tags block level elements */
}

nav a:hover {
    color: rgb(58, 89, 224); /* blue hover effect on navigation links */
}

/* Add some extra warmth to the page with a soft accent color */
footer {
    background-color: #f4a261; /* warm accent color for footer */
    padding: 20px;
    text-align: center;
    color: #fff;
    font-size: 14px;
}

footer a {
    color: #fff; /* footer link color */
    transition: color 0.3s ease;
}

footer a:hover {
    color: rgb(58, 89, 224); /* footer link hover effect */
}