/* header.css */

header {
  position: fixed; /* Ensures the header stays at the top */
  top: 0; /* Aligns the header to the top of the page */
  display: flex;
  justify-content: space-between;
  align-items: center; /* Aligns all elements vertically centered */
  background-color: #323238;
  border: 1px solid #404040;
  width: 100%;
  height: 70px;
  z-index: 1000; /* Keeps the header above other elements (except sidebar) */
}

.header-container-leftside {
  display: flex;
  align-items: center; /* Vertically center the logo and hamburger */
}

.logo {
  margin-left: 0;
  display: flex;
  align-items: center; /* Ensure vertical alignment for both the logo and "LifeLogging.AI" text */
}

.logo a {
  font-family: "Roboto Mono", mono, sans; /* Use the same font as the "Join" and "Login" links */
  font-size: 16px;
  font-weight: 400;
  color: #ACACC1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px;
  background-color: #323238;
  border: 1px solid #404040;
  display: flex;
  align-items: center;
}

.logo a:hover {
  background-color: #E5A028;
  border: #D99E36 1px solid;
  color: #000;
}

.logo a:nth-of-type(2) {
  font-size: 25px; /* Increase the font size for "LifeLogging.AI" */
}

.nav-right {
  margin-left: auto; /* Pushes the navigation to the far right */
  display: flex;
  align-items: center; /* Align the "Join" and "Login" links vertically */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center; /* Ensures all list items are vertically aligned */
}

nav li {
  margin-left: 20px;
}

nav a {
  font-family: "Roboto Mono", mono, sans;
  font-size: 16px;
  font-weight: 400;
  color: #ACACC1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px;
  background-color: #323238;
  border: 1px solid #404040;
  display: flex;
  align-items: center; /* Aligns text vertically within each link */
}

nav a:hover {
  background-color: #E5A028;
  border: #D99E36 1px solid;
  color: #000;
}


/* ================================================== */
/* RESPONSIVE WEB DESIGN (RWD) MOBILE WEB ADJUSTMENTS */
/* ================================================== */

@media (max-width: 768px) {

.logo a:nth-of-type(2) {
  font-size: 15px; /* Decrease the font size for "LifeLogging.AI" so it fits on narrow screens */
}

}