html,body{
  height: 100%;
  margin: 0;

}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .theme-text {
    display: none;
  }

   #theme-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    justify-content: center;
  }

  #theme-icon {
    margin: 0;
  }
}
/* Light and Dark Styles*/

body {
  transition: background-color 0.5s ,color 0.4s;
 }

body.light-mode{
    background-color: #ffffff;
    color: #000000;
  }

body.dark-mode {
  background: #111827;
  color: rgb(255, 255, 255);
}

.card{
  transition: background-color 0.3s, color 0.3s;
}
body.dark-mode .card {
      background-color: rgba(31, 41, 55, 0.6);
      border: 1px solid rgba(107, 114, 128, 0.3);
      color: #ffffff;
      transition: 0.3s ease;
    }
body.light-mode .card {
      background-color: #ffffff;
      border: 1px solid #e5e7eb;
      transition: 0.3s ease;
    }

.card:hover {
  border-color: #3b82f6;
  transform: translateY(-4px);
}

/* Top bar layout */
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  margin: 0;
}

/* Text Styling */
 
.navbar-nav li a {
  color: white;
}

.navbar-toggler .navbar-toggler-icon {
  color: white;
}

 
    
/* Style the scrollbar */
::-webkit-scrollbar {
  width: 12px; /* Width of the vertical scrollbar */
  height: 12px; /* Height of the horizontal scrollbar */
}

/* Track (background of the scrollbar) */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* Light gray */
  border-radius: 10px; /* Rounded edges */
}

/* Handle (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
  background: #888; /* Darker gray */
  border-radius: 10px; /* Rounded edges */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* Even darker gray when hovered */
}