html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 0;
}

body > .container {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

html.dark body {
  background-color: #111827;
  color: #f9fafb;
}

html.dark .navbar,
html.dark .card,
html.dark .footer {
  background-color: #1f2937 !important;
  color: #f9fafb;
}

html.dark .text-dark {
  color: #f9fafb !important;
}

html.dark .text-muted {
  color: #9ca3af !important;
}

html.dark .border-bottom,
html.dark .border-top {
  border-color: #374151 !important;
}

html.dark .navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

html.dark .navbar-brand {
  color: #f9fafb !important;
}

html.dark .btn-outline-secondary {
  color: #d1d5db;
  border-color: #6b7280;
}

html.dark .btn-outline-secondary:hover {
  background-color: #374151;
  color: #f9fafb;
}

html.dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark .form-control {
  background-color: #1f2937;
  border-color: #4b5563;
  color: #f9fafb;
}

html.dark .form-control:focus {
  background-color: #1f2937;
  color: #f9fafb;
}

.nav-link.active {
  font-weight: 600;
  text-decoration: underline;
}