html, body {
  height: 100%; /* Ensure the html and body take up full viewport height */
  margin: 0; /* Remove default margins */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack content vertically */
  background-color: rgb(241 241 241);
}

main { /* Or a wrapper around your main content */
  flex: 1; /* Allow the main content to expand and fill available space */
}

footer {
  /* Footer styles - background color, padding, etc. */
  background-color: #f0f0f0; /* Example background color */
  padding: 20px; /* Example padding */
  /* Other footer styles as needed */
}

/* Optional: Add a sticky footer if the content is shorter than the viewport */
body {
  min-height: 100vh; /* Ensure body is at least the viewport height */
  font-family: "Manrope", serif;
}

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

.dark-mode .navbar {
    background-color: #1f1f1f !important;
}

.dark-mode .card {
    background-color: #2a2a2a;
    color: #ffffff;
    border: 1px solid #444;
}

.dark-mode input, 
.dark-mode select, 
.dark-mode textarea {
    background-color: #333;
    color: #ffffff;
    border: 1px solid #555;
}

.dark-mode .btn-light {
    background-color: #222;
    color: #ffffff;
}

.navbar {
    background-color: #339df2 !important;
}