:root {
	--sideNavBackground: #171717;
	--sideNavFontColour: white;

	--sideNavActiveDrop: #26a69a;
	--sideNavActiveDropFont: white;
	
	--sideNavHoverFont: #f1f1f1;
	--sideNavHoverBackground: #30746e;
	
	--sideNavDropdownBackground: #46575f;
}
 
 /* Its own element */ 
 .sidenav {
  display: block;
  height:100%;
  width: 0; /* Start with 0 width */
  position: fixed; /* Changed from absolute to fixed */
  z-index: 99; /* High z-index for overlay on small screens */
  background-color: var(--sideNavBackground);
  overflow-x: hidden;
  transition: width 0.3s ease-in-out;
  padding-top: 50px; /* moves menu down away from header */
  white-space: nowrap;
}

.sidenav a, .dropdown-btn {
  padding-top: 10px;
  padding-right: 8px;
  padding-bottom: 10px;
  padding-left: 20px;
  text-decoration: none;
  font-size: 15px;
  font-weight: normal;
  color: var(--sideNavFontColour);
  display: block;
  align-items: left;
  gap: 10px; /* Space between icon and text */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  border: none;
  background: none;
  width: 100%;
  text-align: left; /* Ensures text is aligned to the left */
  cursor: pointer;
  outline: none;
  white-space: nowrap;
 }
 
/* Add an active class to the active dropdown button */
.active {
  background-color: var(--sideNavActiveDrop) !important;
  color: var(--sideNavActiveDropFont);
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: var(--sideNavHoverFont);
    background-color: var(--sideNavHoverBackground);
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: var(--sideNavDropdownBackground); /* Darker background for dropdown */
  padding-left: 20px; /* Indent dropdown links */
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  margin-left: auto; /* Pushes the caret to the far right */
  padding-right: 15px;
  white-space: nowrap;
  transition: transform 0.3s ease-in-out;
}

 /* On screens that are 400px or less, set the font to 38 */

@media screen and (min-width: 320px) {
	.dropdown-btn, .sidenav a {font-size: 18px;}
}

@media screen and (min-width: 700px) {
	.dropdown-btn, .sidenav a {font-size: 16px;}
}

@media screen and (min-width: 1200px) {
	.dropdown-btn, .sidenav a {font-size: 15px;} 
  body {background-color: var(--mainPageBackground); }
}

/* On larger screens, the sidebar is part of the layout flow */
@media screen and (min-width: 769px) {
  .sidenav {
    z-index: 1; /* Lower z-index so it doesn't overlay header */
  }
}