/* Adjust body margin to make space for the header */
#body {
  margin-top: 120px; /* Adjust the body margin to make space for the header */
}

/* Apply logo in book-wide header with higher specificity */
#body div.margin-header {
  position: fixed;
  border: 2px solid red; /* Temporary for debugging */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  z-index: 10;
  width: 100%;
  text-align: center;  /* Center the logo */
   background-color: white;  /* White, opaque background */
  background-image: url("logo_black.png") !important; /* Point to your logo file */
  background-size: contain;  /* Ensure the logo fits in the header */
  background-repeat: no-repeat;  /* Prevent repeating the logo */
  background-position: center center;  /* Center the background image */
  height: 120px;  /* Adjust this height to match the logo's size */
}


 /* Increase the width of the margin sidebar */
#quarto-margin-sidebar {
  width: 300px; /* Adjust the width as needed, e.g., 300px */
  /* You can also use a percentage if you want relative width, e.g., 30% */
}