:root {
  /* Light theme defaults */
  --bg-color: #ffffff;
  --text-color: #222;
  --link-color: #0000ff; /* Blue for light mode */
  --link-visited-color: #800080; /* Purple for light mode */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme colors */
    --bg-color: #121212; /* Dark gray background */
    --text-color: #efefec; /* Light text */
    --link-color: #58a6ff; /* Lighter blue for dark mode */
    --link-visited-color: #81c5f8; /* Lighter purple for dark mode */
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a:link {
  color: var(--link-color);
}

a:visited {
  color: var(--link-visited-color);
}

a:hover {
  /* Set a hover color that works in both themes, e.g., a slightly brighter version */
  color: #ffffff;
}

a:active {
  /* Color when the link is clicked */
  color: #ff4040;
}