/* Enable support for dark mode */
:root {
  color-scheme: light dark;
}

/* Override dark mode styles */
@media (prefers-color-scheme: dark) {
  code {
    color: #e6c07b;
  }
    
  .bg-light {
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  }

  h2 {
    color: white;
  }

  .lead {
    color: white;
  }

  #text-output {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: white;
  }

  #explanation-alert strong {
    color: var(--bs-primary);
  }

  #explanation-alert #explanation-content {
    color: white;
  }

  .alert-success {
    background-color: rgba(var(--bs-success-rgb), 0.1);
    border-color: rgba(var(--bs-success-rgb), 0.2);
  }

  #hint-alert strong {
    color: var(--bs-primary);
  }

  #hint-alert #hint-content {
    color: white;
  }

  .alert-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.2);
  }

  #what-content {
    color: white;
  }

  #nav button {
    color: white;
  }

  #footer p {
    color: white !important;
  }
}