html {
  background-color: black;

  /* These properties can be set to other values to make font rendering look
   * more similar between browsers, but I would like to use subpixel
   * antialiasing and font synthesis, so I'll have to accept the browser
   * differences instead, I guess. */
  -webkit-font-smoothing: subpixel-antialiased;
  font-synthesis: weight style small-caps;
  text-rendering: optimizeLegibility;
}

html.article {
  background-color: white;
}

body {
  counter-reset: slide-number 0;

  display: block;
  margin: 0px;
  background-color: transparent;
}

.hide {
  display: none;
}

.debug {
  outline: 1px red dashed;
  background: #ff000022;
}

.todo {
  width: 100%;
  height: 100%;
  background: #aaaaaa80;
  font-size: 2em;
  position: absolute;
  inset: 0;
  color: red;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.hide-cursor {
  cursor: none;
}

div.slide, div.poster {
  background-color: white;
  break-after: page;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;

  text-align: justify;
}

div.slide {
  justify-content: space-evenly;

  counter-increment: slide-number;
}

div.slide.title {
  justify-content: space-between;
  align-items: center;
}

div.slide.headless h2, div.slide.headless h3 {
  display: none;
}

div.slide.image-fill {
  display: block flow-root;
}

div.slide.image-fill > img,
  div.slide.image-fill > div,
  div.slide.image-fill > object {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

div.slide h3 {
  position: absolute;
  top: 7.5%;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.row > * {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.col > * {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* height: 100%; */
  /* width: auto; */
}

.row .contain {
  width: 100%;
  height: auto;
}

.col .contain {
  width: auto;
  height: 100%;
}

.contain > * {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.row .fill {
  height: 100%;
}

.col .fill {
  width: 100%;
}

.row.no-gap, .col.no-gap {
  gap: 0;
}

.no-margin {
  margin: 0;
}

.no-wrap {
  white-space: nowrap;
}

.ljust {
  text-align: left;
}

.rjust {
  text-align: right;
}

.cjust {
  text-align: center;
}

.just {
  text-align: justify;
}

.jc-start {
  justify-content: start;
}

.jc-end {
  justify-content: end;
}

.jc-center {
  justify-content: center;
}

.jc-space-around {
  justify-content: space-around;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-space-evenly {
  justify-content: space-evenly;
}

.jc-stretch {
  justify-content: stretch;
}

.ai-start {
  align-items: start;
}

.ai-end {
  align-items: end;
}

.ai-center {
  align-items: center;
}

.ai-stretch {
  align-items: stretch;
}

div.slide p {
  margin: 0;
}

div.slide h1, div.slide h2, div.slide h3,
    div.poster h1, div.poster h2, div.poster h3 {
  margin: 0px;
}