.quarto-title-block .quarto-title-banner {
  padding: 3rem 0rem;
  background-image: none !important;
  background:
      /* top, transparent red, faked with gradient 
      linear-gradient(
    rgba(227,27,35, 0.3),
    rgba(0,0,0, 0.5),
    rgba(0,134,63, 0.3)
      ),*/
      /* bottom, image */
      url('../images/paur_banner.png') !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size:cover !important;
  background-position: right 0px top 0px;
}

#title-block-header.quarto-title-block.default .quarto-title .title {
  font-weight: 700 !important;
  font-size: 2.2rem;
  font-family: "Gotham SSm A", "Gotham SSm B", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica     Neue", Arial, sans-serif !important;
  color: #fff !important;
}

.toc-active{
  color: #b0904a;
}


/* --- Keep the title/banner centered on the *viewport* --- */
/* Base banner styling */
#title-block-header .quarto-title-banner{
  background-image: url("images/paur_banner.png");
  background-repeat: no-repeat;
  background-position: center center;

  /* allow scaling */
  background-size: contain;

  /* make banner responsive */
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* responsive height */
  height: clamp(120px, 18vw, 320px);
}

/* Prevent "column-page-left" from pulling banner contents left */
#title-block-header .quarto-title {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* If you actually render an <img> in the banner, force true centering */
#title-block-header .quarto-title-banner img {
  display: block;
  margin: 0 auto;
}