/* Base styles */
body {
    font-family: Arial, sans-serif;
    margin: 40px;
    text-align: center;
    background-color: #ffffff; /* Light mode background color */
    color: #333; /* Light mode text color */
}

h1 {
    color: #333; /* Default text color */
}

a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff; /* Default link background color */
    color: #ffffff; /* Default link text color */
    text-decoration: none;
    border-radius: 5px;
}

a:hover {
    background-color: #0056b3; /* Hover link background color */
}

/* Dark mode styles */
.dark-mode {
    background-color: #333; /* Dark mode background color */
    color: #fff; /* Dark mode text color (white) */
}

@media (prefers-color-scheme: dark) {
    body, h1, a {
        background-color: #333; /* Dark mode background color */
        color: #ddd; /* Dark mode text color */
    }
    a {
        background-color: #0056b3; /* Adjusted for better visibility */
        color: #ffffff; /* Ensuring link text is visible */
    }
    a:hover {
        background-color: #004080; /* Darker shade for hover state */
    }
}