.user-menu {
  background-color: rgb(246 248 246 / 20%); /* Light background color with transparency */
  width: 100%; /* Full width */
  position: fixed; /* Fixes the nav at the top */
  top: 65px; /* Moves the nav down 20px from the top */
  left: 0; /* Aligns it to the left */
  z-index: 1000; /* Ensures it stays above other content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Responsive menu styles */
#user-menu {
  list-style-type: none; /* Removes bullet points */
  padding: 10px; /* Adds some padding */
  margin: 0; /* Removes default margin */
  display: flex; /* Displays menu items in a row */
  justify-content: center; /* Aligns items to the right */
}

#user-menu li {
  margin-left: 5px; /* Adds space between menu items */
}

/* Style for links */
#user-menu a {
  text-decoration: none; /* Removes underline from links */
  color: #21682d; /* Link color */
  font-weight: bold; /* Makes text bold */
}

/* Underline effect on hover */
#user-menu a:hover {
  text-decoration: underline; /* Underline effect on hover */
}

/* Responsive styles */
@media (max-width: 768px) {
  nav {
    top: 10px; /* Move nav even further down on small screens */
  }
  
  #user-menu {
    flex-direction: column; /* Stack menu items vertically on small screens */
    align-items: flex-start; /* Aligns items to the left */
  }
  
  #user-menu li {
    margin-bottom: 5px; /* Space between items when stacked */
    margin-left: 0; /* Remove left margin when stacked */
  }
  
}
.user-menu-tab {
  background-color: rgb(139 144 139);/* Slightly transparent white background */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect for depth */
  border-radius: 5px; /* Rounded corners */
  padding: 10px 15px; /* Padding inside the tab */
  margin: 0px 0; /* Margin to separate from other elements */
  display: inline-block; /* Ensures it fits the content */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Additional hover effect */
.user-menu-tab:hover {
  background-color: rgba(255, 255, 255, 1); /* Fully opaque on hover */
}