/* Light Theme */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* Light Grey */
    color: black;
    transition: background-color 0.5s, color 0.5s; /* Smooth transition for theme changes */
}

header h1 {
    text-align: center;
    padding: 20px 0;
}

main ul {
    padding: 0;
    list-style-type: none;
    max-width: 600px;
    margin: 20px auto;
}

main ul li {
    margin: 10px 0;
}

main ul li a {
    text-decoration: none;
    color: inherit;
}

/* Dark Theme */
[data-theme="dark"] {
    background-color: #202020; /* Dark Grey */
    color: #ffffff; /* White */
}

[data-theme="dark"] main ul li a {
    color: #ffffff; /* White */
}