@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz@8..60&display=swap');


:root {
  --header-font-size: max(10px, 1.4vw);
  --header-font-color: #898E8B;
  --header-margin: 0px 0px 0px 0px;
  --header-font-family: 'Source Serif 4', serif;
}

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

.reveal .reveal-header p {
  color: var(--header-font-color);
  text-align: center;
  margin: var(--header-margin);
  font-size: var(--header-font-size);
}

div.header-logo-left { grid-area: "logo_left";}
div.header-logo-right { grid-area: "logo_right";}

div.reveal-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "logo_left logo_right";
  column-gap: 10px;
  align-items: center;
}

.reveal .header-logo-left img {
  margin: var(--header-margin);
  padding-left: 1vw;
  padding-top: 5px;
  height: auto;
  width: auto;
  max-width: max(60px, 10vw);
  max-height: max(60px, 10vh);
}

.reveal .header-logo-right img {
  margin: var(--header-margin);
  padding-right: 1vw;
  padding-top: 5px;
  height: auto;
  width: auto;
  max-width: max(60px, 10vw);
  max-height: max(60px, 10vh);
  float: right;
}

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;
  }
}