/*
  Slides (Markdown to Slides): one .md-slide per slide, a fixed 1280×720 (16:9)
  or 960×720 (4:3) canvas that's scaled to fit wherever it's shown. Used on the
  page, in present mode and the presenter view, and in the exported HTML and
  PDF, so a slide looks the same everywhere. The text inside is a normal
  .md-doc, so the document themes apply.
*/

.md-slide {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: #ffffff;
  color: #1f2328;
}
.md-slide.is-4x3 { width: 960px; }
.md-slide > .md-doc {
  --md-size: 30px;
  --md-gap: 0.65em;
  flex: 1;
  box-sizing: border-box;
  padding: 64px 80px 56px;
  background: transparent;
  overflow: hidden;
}
.md-slide .md-doc h1 { font-size: 1.85em; margin-top: 0; }
.md-slide .md-doc h2 { font-size: 1.45em; margin-top: 0; }
.md-slide .md-doc h3 { font-size: 1.15em; }
.md-slide .md-doc h1, .md-slide .md-doc h2 { padding-bottom: 0.25em; }
.md-slide .md-doc li + li { margin-top: 0.35em; }
.md-slide .md-doc pre { font-size: 0.7em; }
.md-slide .md-doc table { font-size: 0.85em; }
.md-slide .md-doc img { max-height: 460px; }
.md-slide.is-title > .md-doc { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.md-slide.is-title .md-doc h1, .md-slide.is-title .md-doc h2 { border: 0; }
.md-slide.is-title .md-doc h1 { font-size: 2.3em; }
.md-slide.is-title .md-doc h1 + h2, .md-slide.is-title .md-doc h1 + p { color: var(--md-muted); font-weight: 400; }
.md-slide-number { position: absolute; right: 32px; bottom: 20px; font: 600 18px/1 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #8c959f; }

/* A whole exported deck: one slide on screen at a time, all of them on paper. */
body.md-deck { margin: 0; background: #1b1d21; overflow: hidden; }
.md-deck .md-slide { position: absolute; left: 50%; top: 50%; transform-origin: center; box-shadow: 0 10px 40px rgb(0 0 0 / 0.4); }
.md-deck .md-slide:not(.is-shown) { display: none; }
.md-deck-bar { position: fixed; left: 0; bottom: 0; height: 4px; background: #2f81f7; transition: width 0.2s; }

@media print {
  body.md-deck { background: #ffffff; overflow: visible; }
  .md-deck .md-slide, .md-deck .md-slide:not(.is-shown) {
    display: flex;
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .md-deck-bar { display: none; }
}