:root {
  --main-bg: #f0f4f8;
  --main-text: #1e293b;
  --accent: #3b82f6;
  --dark-bg: #0f172a;
  --dark-text: #f1f5f9;
  --card-bg: #ffffff;
  --dark-card: #1e293b;
}

body {
  background-color: var(--main-bg);
  color: var(--main-text);
  transition: background-color 0.4s, color 0.4s;
}

.dark-mode {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

.dark-mode .card {
  background-color: var(--dark-card) !important;
  color: var(--dark-text) !important;
}

header {
  text-align: center;
  padding: 2rem;
}

.motivation {
  font-style: italic;
  color: var(--accent);
}

.batch-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.batch-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.toggle-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
}

footer {
  background-color: #1e293b;
  color: #f1f5f9;
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 3rem;
}

footer a {
  color: #60a5fa;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}