body {
  background-color: #f8f9fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
  margin-bottom: 2rem;
}

.card-header {
  font-weight: bold;
  font-size: 1.2rem;
}

#status h5,
#status h6 {
  margin-bottom: 0.3rem;
}

#progressBar {
  height: 20px;
}

#achievement {
  margin-top: 1rem;
  font-weight: bold;
  color: green;
}

.dark-mode {
  background-color: #121212 !important;
  color: #ffffff !important;
}

.dark-mode .card,
.dark-mode .navbar,
.dark-mode .bg-light,
.dark-mode footer {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-color: #333 !important;
}

.dark-mode .navbar .nav-link,
.dark-mode .text-muted {
  color: #ccc !important;
}

footer a {
  text-decoration: none;
}