#side-panel H3 {
  font-size: 48px;
  margin-bottom: 0.5rem;
}

#side-panel H4 {
  font-size: 36px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#side-panel H5 {
  font-size: 30px;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

#side-panel p {
  font-size: 16px;
  margin: 0.25rem 0;
}

#side-panel hr {
  border-color: #ccc;
  margin: 0.75rem 0;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;

}

#side-panel p.small {
  font-size: 14px;
}

/* Style all links in the sidebar */
#side-panel a.sidebar-link {
  color: #1a0dab;
  text-decoration: none;
  font-weight: 500;
}
/* put a 4px gray border around the whole page */
#page-container {
  border: 4px solid #333;
  box-sizing: border-box;
}

/* Hover effect */
#side-panel a.sidebar-link:hover {
  text-decoration: underline;
}


/* Filter Container up Above the Map */
.filter-container {
  display: flex;            /* line children up horizontally */
  gap: 0.5rem;              /* space between the two boxes */
  align-items: flex-start;  /* ensure summaries align at top */
}

/* Optional: ensure each details box wraps its content */
.filter-container details {
  flex: 1;                  /* allow boxes to share available width equally */
  min-width: 120px;         /* or any desired minimum */
}

/* Optional: prevent <details> from expanding beyond a certain width */
.filter-container details summary {
  font-weight: bold;
}

/* Styling for the white background and box-shadow remains the same */
.filter-box {
  background-color: white;
  padding: 0.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 0.9rem;
}