/* we need to hide this element */
  /* <header id="title-block-header" class="quarto-title-block"></header> */

header#title-block-header {
  display: none;
}

body.quarto-light #hero-banner {
 background-color: rgb(240,245,249);
}

body.quarto-dark #hero-banner {
 background-color: #17212B;
}

div.carousel {
  margin-top: 2rem; 
}

body.quarto-dark .carousel-dark .carousel-indicators [data-bs-target] {
  background-color: rgb(255,255,255);
}

body.quarto-dark .carousel-dark .carousel-control-next-icon,
body.quarto-dark .carousel-dark .carousel-control-prev-icon {
  filter: inherit;
}

#quarto-content main { 
margin-top: 0;
padding-top: 0;
}

html {
  scroll-behavior: smooth;
}

.headline {
  font-size: 1.25em;
  font-weight: 300;
  padding-bottom: 1em;
}

.headline p {
  margin: 0;
  padding-bottom: 0.2rem;
}

.headline a {
  text-decoration: none;
}

.headline ul li {
  margin-bottom: 0.3em;
}

.carousel.card {
  padding-top: 2em;
}

.carousel img {
  width: 70%;
  margin-bottom: 110px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  margin-bottom: 110px;
}

.carousel-caption * {
  padding-top: 1em;
  color: var(--bs-body-color);
}

.card {
  background-color: var(--bs-tertiary-color);
  border-color: var(--bs-primary);
  border: 0; 

}

.card-header * {
  color: var(--bs-body-color);
}

.card-header .text-muted{
  color: var(--bs-link-color) !important;
}

.card-header {
  --bs-light-rgb: var(--bs-tertiary-color);
}