body {
  background-color: #C7B7FF; /* soft lavender pastel */
  color: #222; /* dark gray for contrast */
  font-family: Verdana, sans-serif;
}

li {
  margin-bottom: 5px;
}

img {
  display: block;
  margin-top: 5px;
}

/* HEADER STYLES */
header {
  background-color: #d3d3d3; /* soft grey */
  padding: 5px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  height: 75px;
  top: 0;
  z-index: 1000;
}

header h1 {
  margin: 0;
  font-weight: bold;
  color: #222;
  font-size: 1.8rem;
}

/* CENTERED LOGO IN HEADER */
.header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 145px;
  width: auto;
  transform: translate(-50%, calc(-50% - 2px));
  pointer-events: none;
}

/* BLUESKY LINK STYLES */
.bluesky-container {
  text-align: right;
  font-size: 1rem;
}

.bluesky-container a {
  font-family: Verdana, sans-serif;
  color: #222;
  text-decoration: none;
}

.bluesky-container a:hover {
  text-decoration: underline;
}

/* Basic styles for the navbar */
.nav-bar ul {
  list-style-type: none;
  padding: 0;
  margin: 7;
  background-color: #E4E4E4; /* Same as header background */
  overflow: hidden;
  font-family: Verdana, sans-serif;
}

.nav-bar li {
  display: inline-block;
  position: relative; /* To position the dropdown relative to the parent li */
}

.nav-bar a {
  display: block;
  padding: 14px 16px;
  color: black;
  text-decoration: none;
  background-color: #E4E4E4;
}

/* Hover effects */
.nav-bar li:hover {
  background-color: #D0D0D0;
}

/* Dropdown container, ensure it's hidden by default */
.nav-bar .dropdown {
  display: none; /* Hide initially */
  position: absolute; /* So that it appears under the parent */
  background-color: #f9f9f9; /* Light background */
  min-width: 160px; /* Ensure there's enough space for the items */
  z-index: 1; /* Stay above other content */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  padding: 0;
  list-style-type: none;
  margin: 0;
  border-radius: 5px; /* Optional: rounded corners */
}

/* Make the dropdown appear when hovering the parent li */
.nav-bar li:hover .dropdown {
  display: block; /* Show dropdown */
  opacity: 1; /* Ensure opacity is full */
  visibility: visible; /* Ensure visibility */
}

/* List items inside the dropdown */
.nav-bar .dropdown li {
  padding: 10px 16px;
  border-bottom: 1px solid #ddd; /* Optional: subtle border between items */
}

/* Dropdown link styling */
.nav-bar .dropdown a {
  color: black;
  text-decoration: none;
  display: block;
  padding: 8px 16px;
  transition: background-color 0.2s;
}

/* Hover effect for dropdown items */
.nav-bar .dropdown a:hover {
  background-color: #ddd;
  color: black;
}

/* Optional: remove border-bottom for the last item */
.nav-bar .dropdown li:last-child {
  border-bottom: none;
}