/* quarto revealjs logo extension */

.reveal .reveal-header {
  top: 0;
  margin: 3.2px 0px 2px 0px;
  width: 100%;
  position: fixed;
  z-index: 5;
}

.reveal .reveal-header p {
  text-align: center;
}

div.reveal-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.reveal .header-logo-left,
.reveal .header-logo-right {
  /* Neutralizes the inherited .reveal font-size/line-height so the logo
     img (an inline replaced element) doesn't pick up baseline-driven
     "phantom" space above it — otherwise this grows as the image shrinks
     relative to that line-height at narrow viewports. */
  line-height: 0;
}

.reveal .header-logo-right {
  justify-self: end;
}

.reveal .header-logo-left img,
.reveal .header-logo-right img {
  /* Base size is in reveal.js canvas units; multiplying by --qrh-scale
     (reveal's live Reveal.getScale() factor, published in revealjs-header.js)
     keeps the logo in visual lockstep with the transform-scaled slide
     content instead of pinning it to a constant real-world size. */
  width: auto;
  height: calc(var(--qrh-logo-height, 2.2rem) * var(--qrh-scale, 1));
  padding-top: 5px;
  margin: 0;
}

.reveal .header-logo-left img {
  padding-left: 1vw;
  padding-top: 5px;
}

.reveal .header-logo-right img {
  padding-right: 1vw;
  padding-top: 5px;
}

div.slides section:not(.title-slide):not(#title-slide):not(.stack) {
  padding-top: 1em;
}

/* On screens that are 600px or less*/
@media screen and (max-width: 600px) {
  .reveal .header-logo-left img, .reveal .header-logo-right img {
    padding-top: 0px;
    margin: 0px 0px 5px 0px;
  }
}