/* Light mode defaults */
body.light {
  background-color: #ffffff;
  color: #111;
}

/* Dark mode styles */
body.dark {
  background-color: #121212;
  color: #f1f1f1;
}

body.dark .nav-left-side,
body.dark .linktext,
body.dark .nav-links li a {
  color: #f1f1f1;
}

body.dark section h2,
body.dark section p,
body.dark section a {
  color: #ffffff;
}

body.dark canvas {
  background: #000000; /* or match your dark background */
}

body.dark section {
  background: #000000;
  color: #ffffff;
}

/* Button styling moved to buttonGroup.css for better organization */

body.dark .theme-btn {
  background: #2c2c2c;
  border-color: white;
}

body.dark .nav-links li a .linktext,
body.dark .nav-left-side {
  color: #f1f1f1;
}

/* Hover effect text */
body.dark .linktext::before {
  color: #ccc;
}

body.dark .location {
  background: rgba(244, 244, 244, 0.1);
  color: #f1f1f1;
}

body.dark .location::before {
  background-color: rgba(255, 255, 255, 0.15);
}

body.dark .location::after {
  border: 1px solid rgba(255, 255, 255, 0.3);
}
body.dark .location-icon {
  filter: invert(0.8); /* Adjust icon visibility */
}

body.dark .location:hover .location-icon {
  filter: invert(1); /* Keep it visible */
}

body.dark .home-content h1,
body.dark .home-content h2,
body.dark .home-content p {
  color: #f5f5f5;
}