/* ==========================================================================
   INTS1301 Week 7 — MQ / DRCF theme for reveal.js
   Palette + fonts extracted from ppt/theme/theme1.xml of
   DRCF Presentation 1.pptx (a:clrScheme "MQ", a:fontScheme "MU PPT 2024").
   Visual proportions cross-checked against the rendered reference PDF.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  /* MQ brand palette (per MQ brand guide; matches a:clrScheme "MQ" in
     ppt/theme/theme1.xml where applicable). Brand-guide names used so
     these can be cross-referenced with marketing collateral.          */
  --mq-black: #000000;
  --mq-white: #ffffff;
  --mq-red: #a6192e;          /* Red           — Pantone 187 CP */
  --mq-deep-red: #76232f;     /* Deep Red      — Pantone 188 CP */
  --mq-bright-red: #d6001c;   /* Bright Red    — Pantone 2035 CP */
  --mq-magenta: #c6007e;      /* Magenta       — Pantone 233 CP */
  --mq-purple: #80225f;       /* Purple        — Pantone 242 CP */
  --mq-charcoal: #373a36;     /* Charcoal      — Pantone 447 CP */
  --mq-sand: #d6d2c4;         /* Sand          — Pantone 7527 CP */
  --mq-grey: #7f7f7f;

  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* -- Base slide canvas ----------------------------------------------------- */

.reveal {
  font-family: var(--font-body);
  color: var(--mq-charcoal);
  font-weight: 400;
  /* Do NOT set font-size here — reveal.js computes it from width/height
     configuration and scales the whole deck off that base. */
}

.reveal .slides {
  text-align: left;
}

.reveal .slides > section,
.reveal .slides > section > section {
  background-color: var(--mq-sand);
  color: var(--mq-charcoal);
  /* Narrow top/bottom padding. The flag now lives on the viewport margin
     outside the slide box, so the left padding no longer needs to clear
     it. No !important so sub-slides can override. */
  padding: 0.6em 0.9em 0.7em 1.1em;
  box-sizing: border-box;
  height: 100%;
}

html.reveal-viewport,
.reveal-viewport,
.reveal {
  background-color: var(--mq-sand);
}

/* -- Typography — sized to match DRCF reference proportions --------------- */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--font-heading);
  color: var(--mq-black);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 0.25em 0;
  text-shadow: none;
}

/* Slide title (## in the qmd) — big bold black.
   margin-right reserves the top-right logo footprint so long titles wrap
   cleanly rather than colliding with the MQ shield. */
.reveal h2 {
  font-size: 2.2em;
  font-weight: 700;
  color: var(--mq-black);
  margin: 0 0 0.1em 0;
  padding: 0;
  line-height: 1.05;
}

/* Subtitle (### in the qmd — ALL-CAPS red bar under title).
   The qmd wraps its text in **bold**, so the <strong> inside h3 must
   INHERIT the red rather than pick up the generic strong colour. */
.reveal h3 {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--mq-red);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.4em 0;
  padding: 0 0 0.35em 0;
  border-bottom: 2px solid var(--mq-charcoal);
}

/* Deeper headings (h4+) used occasionally inside slides */
.reveal h4 {
  font-size: 1em;
  font-weight: 600;
  color: var(--mq-charcoal);
  margin: 0.5em 0 0.2em 0;
}

/* Title-slide (Quarto wraps in .quarto-title-block) */
.reveal section.quarto-title-block,
.reveal section.title-slide {
  padding: 1.6em 2em !important;
  text-align: left;
}

.reveal .quarto-title-block h1,
.reveal .quarto-title-block h1.title,
.reveal section.title-slide h1.title {
  font-size: 2.6em;
  font-weight: 700;
  color: var(--mq-black);
  line-height: 1.1;
  margin-bottom: 0.2em;
  text-align: left;
}

.reveal .quarto-title-block .subtitle,
.reveal section.title-slide p.subtitle {
  color: var(--mq-red);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 1.1em;
  border-bottom: 2px solid var(--mq-charcoal);
  padding-bottom: 0.35em;
  margin: 0 0 0.6em 0;
  text-align: left;
}

/* Quarto wraps author/affiliation in a centered flex container with 20px
   padding-left; override so author, affiliation, and date share the same
   left edge as the title, subtitle, and date. */
.reveal .quarto-title-block .quarto-title-authors,
.reveal .quarto-title-block .quarto-title-author {
  display: block;
  text-align: left;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.reveal .quarto-title-block .quarto-title-author-name,
.reveal .quarto-title-block .quarto-title-affiliation,
.reveal .quarto-title-block p.date,
.reveal section.title-slide p.author,
.reveal section.title-slide p.date {
  color: var(--mq-charcoal);
  font-size: 0.75em;
  font-weight: 500;
  text-align: left;
  margin: 0.15em 0;
}

.reveal .quarto-title-block .quarto-title-author-name {
  font-size: 0.85em;
  font-weight: 600;
}

/* Body copy — closer to reveal default; DRCF bullets are dense and readable */
.reveal p,
.reveal li {
  font-size: 1em;
  line-height: 1.35;
  color: var(--mq-charcoal);
  margin-bottom: 0.35em;
}

/* -- Lists (DRCF convention: solid disc + open-circle sub-bullets) --------- */

.reveal ul,
.reveal ol {
  margin: 0.2em 0 0.2em 1.1em;
  display: block;
}

.reveal ul { list-style-type: disc; }
.reveal ul ul { list-style-type: circle; font-size: 0.85em; margin-top: 0.1em; }
.reveal ul ul ul { list-style-type: square; }

.reveal li { margin-bottom: 0.25em; }
.reveal li li { margin-bottom: 0.15em; color: var(--mq-charcoal); }

/* Bold inherits colour from its container so h3/h2 stay their brand colour. */
.reveal strong,
.reveal b {
  color: var(--mq-black);
  font-weight: 700;
}
.reveal h1 strong,
.reveal h2 strong,
.reveal h3 strong,
.reveal h4 strong,
.reveal .subtitle strong {
  color: inherit;
  font-weight: inherit;
}

.reveal em,
.reveal i { font-style: italic; }

/* -- Quotes (opening provocations) ---------------------------------------- */

.reveal blockquote {
  background: transparent;
  border-left: 4px solid var(--mq-red);
  margin: 0.45em 0;
  padding: 0.25em 0.9em;
  font-style: italic;
  color: var(--mq-charcoal);
  box-shadow: none;
  font-size: 0.9em;
  line-height: 1.35;
}
.reveal blockquote p { font-size: 1em; margin-bottom: 0.3em; }

/* -- Quotes column (Week 3 two-column layout) ------------------------------
   Content sits in column 1, all quotes stack in column 2. The composer
   tags the column .qnN with the quote count so the type scales down as
   the stack grows; every child (labels, quote text, citation lines)
   inherits the column's font-size. */

/* Push the content and quote columns apart (50% + 46% widths leave a 4%
   centre gutter with space-between). */
.reveal .columns { justify-content: space-between; }

.reveal .quotes-col { font-size: 0.8em; }
.reveal .quotes-col.qn3 { font-size: 0.68em; }
.reveal .quotes-col.qn4 { font-size: 0.58em; }

.reveal .quotes-col blockquote {
  margin: 0.25em 0 0.4em 0;
  padding: 0.2em 0.7em;
}
.reveal .quotes-col p { margin-bottom: 0.2em; }

/* Quote-only slides ("Four X" comparisons): quotes span the full width
   as a two-up grid instead of leaving an empty content column. */
.reveal .quotes-grid { font-size: 0.85em; }
.reveal .quotes-grid.qn3,
.reveal .quotes-grid.qn4 { font-size: 0.72em; }
.reveal .quotes-grid blockquote {
  margin: 0.25em 0 0.4em 0;
  padding: 0.2em 0.7em;
}
.reveal .quotes-grid p { margin-bottom: 0.2em; }

/* Reference-list URLs must wrap rather than run off the frame edge. */
.reveal #refs a,
.reveal .references a { overflow-wrap: anywhere; }

/* -- Links ----------------------------------------------------------------- */

.reveal a {
  color: var(--mq-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.reveal a:hover {
  color: var(--mq-magenta);
  text-decoration-color: var(--mq-magenta);
}

/* -- Discussion question (last <p> of a slide that starts with <strong>).
      Uses :has() so we don't need to modify the qmd — paragraphs like
      `**Discussion:** ...` get the red-italic closer treatment.          -- */

.reveal section.slide > p:last-of-type:has(> strong:first-child) {
  margin-top: 0.9em;
  padding-top: 0.45em;
  border-top: 1px solid rgba(55, 58, 54, 0.45);
  font-style: italic;
  color: var(--mq-deep-red);
  font-size: 1em;
}

.reveal .discussion-question {
  margin-top: 0.9em;
  padding: 0.45em 0 0 0;
  border-top: 1px solid rgba(55, 58, 54, 0.45);
  font-style: italic;
  color: var(--mq-deep-red);
  font-size: 1em;
}

/* -- Code / monospace ----------------------------------------------------- */

.reveal code,
.reveal pre {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  background: rgba(55, 58, 54, 0.06);
  color: var(--mq-charcoal);
  border-radius: 3px;
}
.reveal code { padding: 0.1em 0.35em; }
.reveal pre {
  padding: 0.5em 0.8em;
  border-left: 3px solid var(--mq-red);
}
.reveal pre code { background: transparent; padding: 0; }

/* -- MQ logo (top-right, viewport-anchored) --------------------------------
   Anchored to the viewport like the flag: the section-anchored version
   (top: -2em off the section box) clipped on any slide whose section sat
   higher than usual (slide 15, the references slide — reproduced three
   inspection rounds running). Geometry matches the good renders: ~260px
   wide, top flush, ~30px right margin at 1920x1080. */

.reveal-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 1.6vw;
  width: 13.5vw;
  height: 7.5vh;
  background-image: url("assets/mq-logo.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  pointer-events: none;
  z-index: 10;
}

/* No logo on the title slide, on slides opting out with .no-logo, and in
   print mode (render_pdfs.py injects its own). */
.reveal-viewport:has(section#title-slide.present)::after,
.reveal-viewport:has(section.title-slide.present)::after,
.reveal-viewport:has(section.no-logo.present)::after,
html.print-pdf .reveal-viewport::after {
  display: none;
}

/* -- Red flag accent (left screen margin) ---------------------------------
   Exact geometry from the MQ master used by the SARDI deck (Parallelogram 5
   in ppt/slideMasters/slideMaster1.xml: custGeom path, rot 324.586°, fill
   accent4 #d6001c), regenerated as assets/flag-mq.svg on a 1920x1080
   canvas. Anchored to the VIEWPORT, not the slide section: reveal insets
   the slide box by its margin, so a section-anchored flag can never touch
   the physical screen edge. The SVG carries its own position (x=0,
   y 55-244px of 1080) and stretches with the viewport. */

.reveal-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/flag-mq.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10;
  pointer-events: none;
}

/* No flag on the title slide, on slides opting out with .no-flag, and in
   print mode (render_pdfs.py injects its own). */
.reveal-viewport:has(section#title-slide.present)::before,
.reveal-viewport:has(section.title-slide.present)::before,
.reveal-viewport:has(section.no-flag.present)::before,
html.print-pdf .reveal-viewport::before {
  display: none;
}

/* -- Slide number (bottom-right) ----------------------------------------- */

.reveal .slide-number {
  font-size: 0.7em;
  font-family: var(--font-body);
  color: var(--mq-charcoal);
  background: transparent;
  right: 30px;
  bottom: 18px;
}

/* -- Footer hook ---------------------------------------------------------- */

.reveal .footer {
  color: var(--mq-grey);
  font-size: 0.5em;
  font-family: var(--font-body);
  padding: 0 30px;
}

/* -- Fragments ------------------------------------------------------------ */

/* Keep reveal's default fade-in. */
.reveal .fragment.highlight-current-blue.current-fragment,
.reveal .fragment.highlight-red.current-fragment {
  color: var(--mq-red);
}

/* -- Images --------------------------------------------------------------- */

.reveal img {
  max-width: 90%;
  max-height: 70vh;
  border: none;
  box-shadow: none;
  background: transparent;
}

.reveal figure { margin: 0.4em 0; }
.reveal figcaption {
  font-size: 0.6em;
  color: var(--mq-grey);
  font-style: italic;
  text-align: center;
  margin-top: 0.3em;
}

/* -- Tables --------------------------------------------------------------- */

.reveal table {
  font-size: 0.8em;
  border-collapse: collapse;
  margin: 0.4em 0;
}
.reveal table th {
  background: var(--mq-charcoal);
  color: var(--mq-white);
  padding: 0.4em 0.8em;
  text-align: left;
  font-weight: 600;
}
.reveal table td {
  padding: 0.35em 0.8em;
  border-bottom: 1px solid rgba(55, 58, 54, 0.2);
}
.reveal table tr:nth-child(even) td {
  background: rgba(166, 25, 46, 0.04);
}

/* -- Callouts ------------------------------------------------------------ */

.reveal .callout,
.reveal .highlight-box {
  background: rgba(166, 25, 46, 0.08);
  border-left: 4px solid var(--mq-red);
  padding: 0.6em 0.9em;
  margin: 0.4em 0;
  font-size: 0.9em;
}

/* -- Print / PDF-export stylesheet --------------------------------------- */

@media print {
  .reveal .slides > section {
    background-color: var(--mq-sand) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---- reveal.js ?print-pdf layout fixes ------------------------------------

   Reveal's print CSS wraps each slide in a `.pdf-page` with overflow:hidden
   and forces sections to `padding:0 !important; position:absolute !important`.
   This clips:
     * the red-flag (::before) and MQ-logo (::after) pseudo-elements, which
       position themselves with negative top/left to bleed off the edge;
     * the per-slide <div class="footer">, which sits inside the section and
       anchors to the section's content-end rather than the visible page.

   scripts/render_pdfs.py runs a DOM restructure before page.pdf(): it moves
   each .footer out of .slide into .pdf-page, and injects .pdf-flag / .pdf-logo
   as siblings of the slide. The rules below style those moved/injected nodes
   relative to .pdf-page (which is `position: relative`).                    */

/* Kill the on-screen pseudo-elements in print mode — their negative offsets
   render outside .pdf-page and get clipped by overflow:hidden. */
html.print-pdf .reveal .slides > section::before,
html.print-pdf .reveal .slides > section::after {
  display: none !important;
}

/* Red flag, injected at top-left of every content pdf-page. Sized in px
   because reveal's base font-size isn't reliably set in print-pdf mode. */
html.print-pdf .pdf-page .pdf-flag {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 340px;
  background-image: url("assets/flag.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  z-index: 10;
  pointer-events: none;
}

/* MQ logo, injected at top-right of every content pdf-page. */
html.print-pdf .pdf-page .pdf-logo {
  position: absolute;
  top: 25px;
  right: 40px;
  width: 360px;
  height: 130px;
  background-image: url("assets/mq-logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  z-index: 10;
  pointer-events: none;
}

/* Per-slide footer — moved by JS to be a direct child of .pdf-page so
   `bottom` anchors to the page bottom, not the content-end of the slide. */
html.print-pdf .pdf-page > .footer {
  display: block !important;
  position: absolute !important;
  bottom: 25px;
  left: 140px;
  right: 140px;
  text-align: center;
  font-size: 20px;
  font-family: var(--font-body);
  color: var(--mq-grey);
  z-index: 10;
}
html.print-pdf .pdf-page > .footer p {
  margin: 0;
}

/* Two-column speaker-notes pages so long notes don't overflow a single page.
   Reveal renders notes in .speaker-notes-pdf[data-layout=separate-page]
   when show-notes: separate-page is configured. The notes content is one
   deeply-nested <ul>; `break-inside: avoid-column` on the UL itself would
   force the whole list into a single column. Apply it to the top-level
   <li>s instead so each bullet stays whole but different bullets can
   flow into the second column. */
html.print-pdf .reveal .speaker-notes-pdf[data-layout=separate-page] {
  column-count: 2;
  column-gap: 2.5em;
  column-rule: 1px solid rgba(55, 58, 54, 0.15);
  padding: 40px 60px !important;
  font-size: 15px;
  line-height: 1.45;
  color: var(--mq-charcoal);
}
html.print-pdf .reveal .speaker-notes-pdf[data-layout=separate-page] > ul {
  margin: 0;
  padding-left: 1.2em;
}
html.print-pdf .reveal .speaker-notes-pdf[data-layout=separate-page] > ul > li {
  break-inside: avoid-column;
  margin-bottom: 0.5em;
}
html.print-pdf .reveal .speaker-notes-pdf[data-layout=separate-page] ul ul {
  margin: 0.2em 0 0.3em 1em;
}
html.print-pdf .reveal .speaker-notes-pdf[data-layout=separate-page] li {
  margin-bottom: 0.25em;
}

/* ==========================================================================
   Narrow-viewport ("phone") reader mode
   --------------------------------------------------------------------------
   reveal.js 5.1 switches itself into scroll view when the available
   presentation width is <= `scrollActivationWidth` (default 435px). That puts
   every slide into the DOM in document order, wrapped as
   `.scroll-page > .scroll-page-sticky > .scroll-page-content > section`, so
   the deck becomes scrollable. It does NOT make the deck readable: each slide
   is still drawn on the 1920x1080 canvas and shrunk with
   `transform: scale(var(--slide-scale))`, which on a 390px phone puts body
   text at roughly 8 CSS px.

   The rules below neutralise that scaling so each slide becomes an ordinary
   full-width block in one continuous document, re-base the deck's em scale to
   a phone-appropriate root size, and stack the two-column layouts.

   Scoping: `body.reveal-viewport.reveal-scroll` is required, not decorative.
   reveal's own scroll-view rules are `!important` at specificity (0,3,1)
   (e.g. `.reveal-viewport.reveal-scroll .scroll-page section`), so an
   override must both carry `!important` and exceed that specificity. Gating
   on `.reveal-scroll` also means these rules are inert unless reveal has
   actually entered scroll view, and the media query keeps them away from a
   scroll view deliberately opened on a wide screen.
   ========================================================================== */

@media screen and (max-width: 600px) {

  /* -- 1. Root type scale ---------------------------------------------------
     Every size in this stylesheet is em-relative to reveal's
     `--r-main-font-size` (40px, chosen for the 1920x1080 canvas). Re-basing
     it rescales the whole design at once instead of patching each rule. */
  body.reveal-viewport.reveal-scroll {
    --r-main-font-size: 19px;
    overflow-x: hidden;
    /* reveal sets `scroll-snap-type: y mandatory` inline; snapping to
       fixed-height pages fights variable-height content. */
    scroll-snap-type: none !important;
  }

  /* -- 2. Neutralise the scroll-view scaling geometry ----------------------- */
  body.reveal-viewport.reveal-scroll .scroll-page {
    height: auto !important;
    scroll-snap-align: none !important;
  }

  body.reveal-viewport.reveal-scroll .scroll-page-sticky {
    position: static !important;
    height: auto !important;
  }

  body.reveal-viewport.reveal-scroll .scroll-page-content {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.reveal-viewport.reveal-scroll .scroll-page section {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    /* `.reveal .slides > section` stops matching once reveal wraps each
       section in `.scroll-page`, so restore the slide's own surface. */
    background-color: var(--mq-sand);
    box-sizing: border-box;
    padding: 1.1em 0.9em 1.6em 0.9em !important;
    border-bottom: 1px solid rgba(55, 58, 54, 0.35);
  }

  /* -- 2b. Heading scale ----------------------------------------------------
     The heading ems are tuned for a 1920px canvas where a title occupies one
     line. At 390px the same ems wrap a title to three lines and push the
     content of every slide below the fold, so scale the headings (only) down.
     Body copy keeps the full root size. */
  body.reveal-viewport.reveal-scroll .reveal h2 {
    font-size: 1.6em;
    /* Week 4 reserves a right-hand gutter on h2 so long titles clear the MQ
       logo. The logo is hidden in reader mode, so the gutter would only
       throw away phone width. Harmless where no gutter is set. */
    padding-right: 0;
  }

  body.reveal-viewport.reveal-scroll .reveal h3 {
    font-size: 1em;
  }

  body.reveal-viewport.reveal-scroll .reveal .quarto-title-block h1.title,
  body.reveal-viewport.reveal-scroll .reveal section.title-slide h1.title {
    font-size: 2em;
  }

  body.reveal-viewport.reveal-scroll .reveal .quarto-title-block .subtitle,
  body.reveal-viewport.reveal-scroll .reveal section.title-slide p.subtitle {
    font-size: 1em;
  }

  /* The title slide's 2em side padding is a 1920px proportion. */
  body.reveal-viewport.reveal-scroll .reveal section.quarto-title-block,
  body.reveal-viewport.reveal-scroll .reveal section.title-slide {
    padding: 1.1em 0.9em 1.6em 0.9em !important;
  }

  /* -- 3. Stack the two-column layouts --------------------------------------
     Quarto writes the column width as an inline style, hence !important. */
  body.reveal-viewport.reveal-scroll .reveal .columns {
    display: block !important;
  }

  body.reveal-viewport.reveal-scroll .reveal .columns > .column {
    width: 100% !important;
    margin: 0 0 0.5em 0 !important;
  }

  body.reveal-viewport.reveal-scroll .reveal .columns > .column:last-child {
    margin-bottom: 0 !important;
  }

  /* The quote column shrinks its type as the quote stack grows, which exists
     only to fit a fixed-height slide. A stacked column has unlimited height,
     so the shrink now costs legibility and buys nothing. */
  body.reveal-viewport.reveal-scroll .reveal .quotes-col,
  body.reveal-viewport.reveal-scroll .reveal .quotes-col.qn3,
  body.reveal-viewport.reveal-scroll .reveal .quotes-col.qn4,
  body.reveal-viewport.reveal-scroll .reveal .quotes-grid,
  body.reveal-viewport.reveal-scroll .reveal .quotes-grid.qn3,
  body.reveal-viewport.reveal-scroll .reveal .quotes-grid.qn4 {
    font-size: 1em;
  }

  body.reveal-viewport.reveal-scroll .reveal .quotes-col {
    border-top: 1px solid rgba(55, 58, 54, 0.25);
    padding-top: 0.5em;
  }

  /* -- 4. Viewport-anchored brand furniture ---------------------------------
     The flag and logo paint on `.reveal-viewport`, which in scroll view is
     the whole tall scrolling document, so they would stretch over the
     entire deck rather than sit on one slide. */
  body.reveal-viewport.reveal-scroll::before,
  body.reveal-viewport.reveal-scroll::after {
    display: none !important;
  }

  /* -- 5. Keep wide content inside the frame -------------------------------- */
  body.reveal-viewport.reveal-scroll .reveal img {
    max-width: 100%;
    max-height: none;
  }

  body.reveal-viewport.reveal-scroll .reveal table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  body.reveal-viewport.reveal-scroll .reveal pre {
    overflow-x: auto;
  }
}