/* Simple style for slides to be used together with
   the b6+ script. For usage instructions, see Overview.html

   Slides in slide mode are linearly scaled up versions of
   the slides in list mode.

   TODO: Styles for tables? blockquotes?

   TODO: Styles for '@media (prefers-color-scheme: dark)' and for
   class=darkmode on the BODY or on slides.

   Layout of a slide:

   +-------+---------------------------------------+
   |       |                   1em                 |
   |       |   +-------------------------------+   |
   | LOGO  |   |                ^              |   |
   |       |   |                |              |   |
   | 5.5em |1em|              21em             |1em|
   |       |   |                |              |   |
   |       |   |                v              |   |
   |       |   +-------------------------------+   |
   |   #   |                   1em                 |
   +-------+---------------------------------------+

   A = 16/9  = aspect ratio
   N = 23    = height in rem (i.e., 21 lines + 2 x 1 rem padding)
   L = 5.5   = logo width in rem
   C = 1.6   = font size (and logo size) multiplier for cover pages
   w = N*A   = width of slide in rem

   Created: 19 December 2019
   Author: Bert Bos <bert@w3.org>
*/

/* Common layout independent of slide mode */
html {font: 1em/1.3 Lato, Carlito, Calibri, Open Sans, Helvetica Neue,
    Helvetica, Arial, Liberation Sans, sans-serif;
  font-size-adjust: 0.506; font-variant-numeric: oldstyle-nums tabular-nums}
body {background: url(linen.png) #595b60; counter-reset: slide;
  margin: 2em 2em 5em; color: white}
address {/*font-family: serif*/}
h1, h2 {font-size: 2em; line-height: 1.1; margin: 0 0 0.3em 0}
.full, .comment {width: 40.889rem; /*= w */ height: 23rem; /*= N */}
.slide {width: 40.889rem; /*= w */ min-height: 23rem; /*= N */
  color: black; box-shadow: 0 0.4rem 0.6rem #000; line-height: 1.6;
  padding: 1rem 1rem 1rem 6.5rem /*= L + 1 */; position: relative;
  box-sizing: border-box; z-index: 0; display: inline-block;
  margin: 4rem 2rem 0 0; vertical-align: bottom; counter-increment: slide;
  scroll-behavior: smooth; border-radius: 0.5rem;
  background: 1rem 50% / 3.5rem /*= L-2 */ auto url(b6plus-logo.svg) no-repeat,
    top left / 5.5rem /*= L */ 100% url(banner2.svg) no-repeat,
    bottom right / 12% auto url(swirl.svg) no-repeat, white}
.full .slide {height: 23rem; /*= N */}
.slide h1::after, slide h2::after {content: ""; display: block;
  margin-left: -3.5rem /* = -1 - L/2 */; height: 0.2rem;
  background: linear-gradient(to right,#CB6628,#FFF,#CB6628,#CB6628,#CB6628)}
.slide.cover h1::after, slide.cover h2::after {content: none}
.slide:target {outline: lime solid 0.5rem; outline-offset: 1rem}
.slide.side {padding-left: 17.217rem /*= L + 2 + (w - L - 3) * 30% */}
.slide.side.right, .slide.side.r {padding-left: 6.5rem /*= L + 1 */;
  padding-right: 11.717rem; /*= (w - L - 3) * 30% + 2 */}
.side .side {position: absolute; top: 4.3478% /*= 1/N */;
  left: 6.5rem; /*= L + 1 */
  width: 23.764%; /*= (w - L - 3) * 30% / w */}
.side.right .side, .side.r .side {left: 73.791% /*= (L + 2 + (w - L - 3) * 70%) / w */}
@supports (transform: translate(-50%,-50%)) {
  .side .side {top: 50%; transform: translate(-50%,-50%);
    left: 27.779%; /*= (L + 1 + (w - L - 3) * 30% / 2) / w */}
  .side.right .side, .side.r .side {
    left: 85.673% /*= (L + 2 + (w - L - 3) * 85%) / w */}
}
.note {font-size: 80%}
.cover .note {font-size: 40%}
.slide em {font-style: normal;
  background: 0 0 / 100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAfCAYAAABzhIZ5AAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAL4SURBVHja7Vw7rpwwFJ0dsASWMEtAygZcp6KKUkVWujRPVprXsgSyA5ZAkTYSUqT8XpRQRa8cKUqR7gYkT+Q4Bq7B/IZj6UwF2IyPr8/9mNNpwfaOnsQNEg3ZQDUoGpQ9KPR1V0jjGckJDc2TfDbxqga0EC66z0yPIdVjOmOGjkfGVBOhXJCAoQhcmATGjN4GKc+akPWOCOmD2iAuSBuWO5Epy5iIuA8XN0zKMagGNLMLuaWjfSFGTLAvJGMcff5CHdBQKDZBJ66Y60uB4MCQ7FKz+AqGc6S0pSh1p/jzAbKsrL0jRKEtYmqZekzAcSVO3iFBzj0yQnRIh8whGdQYK5mO1FA5tnmAaW1bLRyHDrr3ETeDtQW0gera7mfRnvLgxJvTax+CXMCrH8Se4lxXXVrBUrC9Vm5qd0rY6TzjnLtknxmGqhj/Q67vj0M4RrnROYh2+1uxuVAiBzltTnCRuRab78pA7HIe7XXxtKbmffUIMjjxkZ7n3+h1+Z3uix/0RrUgomRBKCbEqfmJux70i76IdvDtyzzQq/ozvaT39HRwUtrrWnyiFxWs7vr4QM/+zgkHX+mOmnnvxYXe0k+q/sNveiSj1Q1KBwoHGU3u8eKj7YXcVdGS2YfEwKE9+KJDU0dzpTUVskeARw1D4SBnPJc3ZxYZDGUQkAZdvpilcBR5hAh1iTWiB6HL8/ZYM3r0mG7RQ8R4ayTrquNLe0qx4P1PL9/jBvrzkZ58HWjcWbDUJNPiIeC+nQC+HS9Md7mVBiBmYmkUX68MZN5nOtYXUzVrassEq/JJhCKzucVDW8Lqu7Rr6jq6YUR8KkYpnxxybhQs5CFjlC5rmYRwlBy7tavPf6WLZrXUN2LCbqsIxalhV4ro2PqZf8TD2razFXUKJycNMq5vZeuJulhuLmQVcDUKvYggPfbhpOXX+tWjnrk2D+yBtOt+CENuMqC/o8/wIIngt5VnHRmlCCxbRrgLjw8UbEn/Vp7V+HLXRzbQgh4gPOa5n5naH6O0itHwx3iJAAAAAElFTkSuQmCC)}
.columns > * {box-sizing: border-box;
  width: 47.005% /*= (w - L - 4)/2/(w - L - 2) */; float: right}
.columns > *:nth-child(odd) {clear: both; float: left}
.columns {overflow: hidden}
@supports (display: grid) {
  .columns {overflow: visible; display: grid; grid: "a  b" / 1fr 1fr;
     grid-gap: 0 2rem}
  .columns > * {width: auto}
}

/* Notes between the slides */
.comment {background: hsl(270,20%,90%); color: black; padding: 1rem 1rem;
  font-family: Times New Roman, Times, serif; box-sizing: border-box;
  display: inline-block; border-radius: 0.5em; margin: 4em 2em 0 0;
  box-shadow: 0 0.4em 0.6em #000; vertical-align: bottom; overflow: auto}
.comment :link, .comment :visited {color: inherit; text-decoration: underline}
.comment pre {margin-left: 1em; font-family: Helvetica, sans-serif}
.comment :first-child {margin-top: 0}
.comment dd, .comment ul, .comment ol {padding-left: 1em; margin-left: 0}
.comment dd {margin-bottom: 1em}
.comment h1, .comment h2, .comment h3, .comment h4, .comment h5, .comment h6 {
  break-after: avoid}
.comment:before {content: "notes"; display: block;
  text-align: center; font-size: small; font-variant: small-caps;
  border-bottom: thin solid; padding-bottom: 0.3em; margin-bottom: 1rem}

/* Long comments */
.comment.long {columns: 25em; column-rule: thin solid; column-gap: 2rem;
  widows: 2; orphans: 2; width: auto; height: auto; display: block;
  border-radius: 0; overflow: auto}
.comment.long:before {content: none}

img {max-width: 100%}
.num {font-variant-numeric: oldstyle-nums tabular-nums diagonal-fractions}
code, pre {font-family: Andale Mono, Courier, monospace}
code {background: #eee; padding: 0.1em 0.3em; border-radius: 0.3em}
sub, sup {line-height: 0.5}
.slide pre {padding: 0 0.2em; background: black; color: hsl(120,100%,70%)}
ol {padding-left: 2.5em}
ul {padding-left: 1em}
ol, ul {margin: 1em 0}
li ul, li ol {margin: 0}
ul > li {list-style: none}
ul > li::before {content: "\25A0"; display: inline-block; width: 1em;
  margin-left: -1em; color: hsl(270,85%,25%)}

/* Explicit placement on a 3x3 grid */
.place {position: absolute; box-sizing: border-box;
  max-width: 25.589%; /*= (w - L - 4) / 3 / w */
  top: 50%; left: 56.726%; /*= (L + 1 + (w - L - 2) / 2) / w */
  transform: translate(-50%, -50%); text-align: center}
.place.t, .place.top {top: 4.3478%; /*= 1/N */ transform: translate(-50%,0)}
.place.b, .place.bottom {top: auto; bottom: 4.3478% /*= 1/N */;
  transform: translate(-50%,0)}
.place.l, .place.left {left: 15.897%; /*= (L + 1) / w */
  transform: translate(0,-50%); text-align: left}
.place.r, .place.right {left: auto; right: 2.4457%; /*= 1 / w */
  transform: translate(0,-50%); text-align: right}
.place.t.l, .place.top.left, .place.t.r, .place.top.right, .place.b.l,
.place.bottom.left, .place.b.r, .place.bottom.right {transform: none}

/* Numbered lines in a PRE */
pre.numbered {padding-left: 2em; overflow-y: hidden; position: relative}
pre.numbered::before {color: white; text-align: right; white-space: pre-line;
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20";
  position: absolute; top: 0; left: 0; width: 1.3em;
  border-right: thin solid; padding-right: 0.2em; /*background: white*/}

/* Cover pages */
.slide.cover {font-size: 160% /*= C */; text-align: right}
.slide.cover address {position: absolute; bottom: 4.3478% /*= 1/N */;
  left: 15.897% /*= (L + 1)/w */; right: 2.4457% /*= 1 / w */;
  line-height: 1.3}

/* Full-size image overlays */
img.cover, img.fit {position: absolute; z-index: -1; top: 0;
  left: 5.5rem; /*= L */
  width: 86.549%; /*= (w - L) / w */ height: 100%; object-fit: cover; padding: 0}
img.fit {object-fit: contain}
.cover img.cover, .cover img.fit {width: 73.098%; /*= (w - 11) / w */}

/* Slide numbers in lower left corner */
.slide::after {content: counter(slide); color: hsl(270,85%,25%);
  position: absolute; bottom: 1rem; line-height: 1; font-weight: bold; left: 0;
  width: 5.5em /*= L */;
  text-align: center}
.slide.clear::after {content: none}

/* Layout in slide mode (when body has class=full) */
.full, .full .slide {position: absolute; overflow: hidden}
.full {top: 50%; left: 50%; background: black;
  transform: scale(var(--shower-full-scale)); /* For Shower 3.1/3.2 */
  margin: -11.5rem /*= -N/2 */ 0 0 -20.444rem /*= -w/2 */}
.full .slide {visibility: hidden; top: 0; left: 0; margin: 0}
.full .slide.active {visibility: visible}
.full .comment {display: none}
.full .slide:target {outline: none}

/* Progress bar. A data-timing attribute on body indicates the slide
   show is automatic and the class "manual" says it is currently
   paused. */
.full .progress {position: absolute; bottom: 0; left: 0; height: 1px;
  background: linear-gradient(to right, hsla(0,100%,50%,0),hsla(0,100%,50%,1));
  margin: 0; padding: 0; z-index: 1}
[data-timing].manual .progress {background:
   linear-gradient(to right, hsla(240,80%,60%,0),hsla(240,80%,60%,1))}
@media not screen and (prefers-reduced-motion: reduce) {
  /* Experimental media query, see
     https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/ */
  .full .progress {transition: 0.5s}
}

/* Reveal elements one by one */
.full .incremental > :not(.active):not(.visited),
.full .overlay > :not(.active):not(.visited),
.full .next:not(.active):not(.visited) {visibility: hidden}

/* Incremental display with elements replacing each other. In index
   mode, the elements are side by side with a scroll bar to reach them
   (and scroll snap to make scrolling easier). In slide mode, all
   items are in the first slot, but at most one of them is visible. */
.incremental.in-place, .overlay.in-place {display: grid; grid: "a" / 100%;
  gap: 2em; grid-auto-columns: 100%; grid-auto-flow: column;
  overflow: auto; scrollbar-width: thin; scroll-snap-type: x mandatory}
.incremental.in-place > * {scroll-snap-align: end}
.full .incremental.in-place > *, .full .overlay.in-place > * {grid-area: a}
.full .incremental.in-place > .visited:not(.active):not(:last-child),
.full .overlay.in-place > .visited:not(.active):not(:last-child) {
  visibility: hidden}

/* Outline elements on the second window that are incrementally
   displayed on the first window. */
.secondwindow .slide.active .incremental > *,
.secondwindow .slide.active .overlay > *,
.secondwindow .slide.active .next {outline: solid 1px red}

/* A list as a tree structure with box-drawing characters */
.tree {list-style: none; font: 1em/1 monospace;
  white-space: nowrap; padding: 0.2em 0; overflow: auto}
.tree code {background: none; font-family: Gill Sans MT, Gill Sans,
  My Gill Sans, Liberation Sans, sans-serif}
.comment .tree code {font-family: serif}

/* Takahashi method (very big text, very few words) */
.shout {font-size: 400%; line-height: 1.1}
p.shout {margin: 1rem 0}

/* Animation of a slowly growing element */
@media not screen and (prefers-reduced-motion: reduce) {
  /* Experimental media query, see
     https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/ */
  .full .grow {transition: 3s 1s ease-in-out transform;
    position: relative; transform: scale(0.1); transform-origin: 0 50%}
  .active .grow {transform: scale(1)}
}

/* Transitions between slides */
@media not screen and (prefers-reduced-motion: reduce) {
  /* Experimental media query, see
     https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/ */

  .full .slide.active ~ .visited {animation: none} /* Moving backwards */

  /* Transition: fade-in */
  .full .slide.fade-in.visited,
  .fade-in .slide.visited {animation: delay 1s 1}
  .full .slide.fade-in + .active,
  .full .slide.fade-in + .comment + .active,
  .fade-in .slide.active {animation: fade-in 1s 1}
  @keyframes delay {
    from {visibility: visible}
    to {visibility: visible}
  }
  @keyframes fade-in {
    from {opacity: 0}
    to {opacity: 1}
  }

  /* Transition: slide-in */
  .full .slide.slide-in.visited,
  .slide-in .slide.visited {animation: leftout 1s 1}
  .full .slide.slide-in + .active,
  .full .slide.slide-in + .comment + .active,
  .slide-in .slide.active {animation: leftin 1s 1}
  @keyframes leftout {
    from {transform: translate(0%, 0); visibility: visible; z-index: 1}
    to {transform: translate(-100%, 0); visibility: visible; z-index: 1}
  }
  @keyframes leftin {
    from {transform: translate(-100%, 0); visibility: visible}
    to {transform: translate(0%, 0); visibility: visible}
  }

  /* Transition: slide-out */
  .full .slide.slide-out.visited,
  .slide-out .slide.visited {animation: leftout 1s 1}
  .full .slide.slide-out + .active,
  .full .slide.slide-out + .comment + .active,
  .slide-out .slide.active {animation: do-nothing 1s 1}
  @keyframes do-nothing {
    from {z-index: 0}
    to {z-index: 0}
  }

  /* Transition: move-left */
  .full .slide.move-left.visited,
  .move-left .slide.visited {animation: leftout 1s 1}
  .full .slide.move-left + .active,
  .full .slide.move-left + .comment + .active,
  .move-left .slide.active {animation: rightin 1s 1}
  @keyframes rightin {
    from {transform: translate(100%, 0); visibility: visible}
    to {transform: translate(0%, 0); visibility: visible}
  }

  /* Transition: move-up */
  .full .slide.move-up.visited,
  .move-up .slide.visited {animation: topout ease-in 1s 1}
  .full .slide.move-up + .active,
  .full .slide.move-up + .comment + .active,
  .move-up .slide.active {animation: do-nothing ease-in 1s 1}
  @keyframes topout {
    from {transform: translate(0, 0%); visibility: visible; z-index: 1}
    80% {opacity: 1.0}
    to {transform: translate(0, -110%); visibility: visible; opacity: 0.0;
      z-index: 1}
  }

  /* Transition: flip-up */
  .full {perspective: 1000px; perspective: 1000}
  .full .slide.flip-up.visited,
  .flip-up .slide.visited {animation: turn-down 1s 1 ease-in}
  .full .slide.flip-up + .active,
  .full .slide.flip-up + .comment + .active,
  .flip-up .slide.active {animation: turn-up 1s 1 ease-out}
  @keyframes turn-down {
    from {transform: rotateX(0deg); visibility: visible}
    50%, to {transform: rotateX(90deg); visibility: hidden}
  }
  @keyframes turn-up {
    from, 50% {transform: rotateX(-90deg); visibility: visible}
    to {transform: rotateX(0deg); visibility: visible}
  }

  /* Transition: flip-left */
  .full .slide.flip-left.visited,
  .flip-left .slide.visited {animation: flip-left1 1s 1 ease-in}
  .full .slide.flip-left + .active,
  .full .slide.flip-left + .comment + .active,
  .flip-left .slide.active {animation: flip-left2 1s 1 ease-out}
  @keyframes flip-left1 {
    from {transform: rotateY(0deg); visibility: visible}
    50%, to {transform: rotateY(-90deg); visibility: hidden}
  }
  @keyframes flip-left2 {
    from, 50% {transform: rotateY(90deg); visibility: visible}
    to {transform: rotateY(0deg); visibility: visible}
  }

  /* Transition: center-out */
  .full .slide.center-out.visited,
  .center-out .slide.visited {animation: gray 1s 1}
  .full .slide.center-out + .active,
  .full .slide.center-out + .comment + .active,
  .center-out .slide.active {animation: center-out 1s 1}
  @keyframes gray {
    from, to {opacity: 0.5; visibility: visible}
  }
  @keyframes center-out {
    from {clip-path: circle(0)}
    to {clip-path: circle(100%)}
  }

  /* Transition: wipe-left */
  .full .slide.wipe-left.visited,
  .wipe-left .slide.visited {animation: gray 1s 1}
  .full .slide.wipe-left + .active,
  .full .slide.wipe-left + .comment + .active,
  .wipe-left .slide.active {animation: rightin 1s 1}

  /* Transition: zigzag-left */
  .full .slide.zigzag-left.visited,
  .zigzag-left .slide.visited {animation: gray 1s 1}
  .full .slide.zigzag-left + .active,
  .full .slide.zigzag-left + .comment + .active,
  .zigzag-left .slide.active {animation: zigzag-left 1s 1}
  @keyframes zigzag-left {
    from {clip-path:
      polygon(120% 0%, 120% 0%, 100% 30%, 120% 60%, 110% 100%, 120% 100%)}
    to   {clip-path:
      polygon(120% 0%,   0% 0%, -20% 30%,   0% 60%, -10% 100%, 120% 100%)}
  }

  /* Transition: zigzag-right */
  .full .slide.zigzag-right.visited,
  .zigzag-right .slide.visited {animation: gray 1s 1}
  .full .slide.zigzag-right + .active,
  .full .slide.zigzag-right + .comment + .active,
  .zigzag-right .slide.active {animation: zigzag-right 1s 1}
  @keyframes zigzag-right {
    from {clip-path:
      polygon(-20% 0%,  -20% 0%, 0% 30%,  -20% 60%, -10% 100%, -20% 100%)}
    to   {clip-path:
      polygon(-20% 0%, 100% 0%, 120% 30%, 100% 60%, 110% 100%, -20% 100%)}
  }

  /* Transition: cut-in */
  .full .slide.cut-in.visited,
  .cut-in .slide.visited {animation: gray 1s 1}
  .full .slide.cut-in + .active,
  .full .slide.cut-in + .comment + .active,
  .cut-in .slide.active {animation: cut-in 1s 1}
  @keyframes cut-in {
    from {transform: translate(-100%, -100%)}
    to {transform: translate(0%, 0%)}
  }

} /* End of @media not screen and (prefers-reduced-motion: reduce) */

.full abbr {text-decoration: none}

/* b6plus.js will display the live region when in slide mode. */
[role=region][aria-live=assertive] {height: 0; clip-path: inset(0 0 0 100%)}

/* class=framed is used to indicate the slides are inside an iframe. */
body.framed {background: transparent}
body.framed .slide {box-shadow: none}
body.framed .progress {display: none}

/* The current slide in the 1st window when the slide show is in a 2nd
   window. */
body:not(.full) .slide.active {outline: yellow solid 0.5rem;
  outline-offset: 1rem}

/* Style for clocks on the second window or in index mode. */
body {--time-factor: 0} /* Make sure it is defined, will be set by b6+ */
.fullclock, .clock {position: fixed; z-index: 1; top: 0.5em; right: 0.5em;
  background: linear-gradient(hsl(120,90%,15%),
    hsl(120,80%,20%), hsl(120,90%,14%)); color: #fff; border-radius: 0.5em;
  box-shadow: 1px 2px 3px #000; text-align: center; width: fit-content}
/* Make the clock blue when it is paused. */
body.paused .fullclock {background: linear-gradient(hsl(240,85%,55%),
  hsl(240,80%,60%), hsl(240,85%,54%))}
body:not(.paused) .timepause :nth-child(1) {display: none}
body.paused .timepause :nth-child(2) {display: none}
.fullclock {padding: 0.3em; display: grid; justify-items: center; gap: 0.1em;
  grid: "x   y   z" auto
  	"a   b   d" auto
        "f   c   e" auto
	"h   c   g" auto
	/ 1fr 1fr 1fr}
.fullclock time:nth-of-type(1) {grid-area: a; color: #9F9}
.fullclock time:nth-of-type(2) {grid-area: b}
.fullclock time:nth-of-type(3) {grid-area: d}
.fullclock .timepause {grid-area: g}
.fullclock .timeinc {grid-area: e}
.fullclock .timedec {grid-area: f}
.fullclock .timereset {grid-area: h}
.fullclock i:nth-of-type(1) {grid-area: x}
.fullclock i:nth-of-type(2) {grid-area: y}
.fullclock i:nth-of-type(3) {grid-area: z}
.fullclock > span {grid-area: c}
.fullclock time {padding: 0 0.3em}
.fullclock time b {font-family: OCR A Std, Orator Std, monospace;
  font-size: 1.2em}
.fullclock i {font-size: 70%; font-style: normal; color: #9F9}
.fullclock button {width: 100%;
  font-family: Noto Sans Symbols, Symbola, Noto Emoji, sans-serif}
/* The span is made into a pie chart that shows the fraction of time used. */
.fullclock > span, .clock > span {display: inline-block;
  width: 3.5em; height: 3.5em; border-radius: 50%; background: #FFF;
  background: conic-gradient(
      #000 calc(var(--time-factor) * 360deg),
      #FFF calc(var(--time-factor) * 360deg),
      #FFF 360deg), #FFF}
@supports not (background: conic-gradient(
		   #000 calc(var(--time-factor) * 360deg),
		   #FFF calc(var(--time-factor) * 360deg),
		   #FFF 360deg), #FFF) {
  /* If pie chart not possible, show a clock hand that turns */
  .fullclock > span, .clock > span {position: relative; background: #FFF}
  .fullclock > span > span, .clock > span > span {height: 2px;
    width: 50%; background: #000; position: absolute; top: calc(50% - 1px);
    left: 50%; transform-origin: 0 1px;
    transform: rotate(calc(var(--time-factor) * 360deg - 90deg))}
}
/* Make the clock blue when it is paused. */
body.paused .clock {background: linear-gradient(hsl(240,85%,55%),
  hsl(240,80%,60%), hsl(240,85%,54%))}
.clock {padding: 0.3em; display: grid; justify-items: center; gap: 0.1em;
  grid: "a   a   a   a" auto
        "c   c   e   f" auto
	"c   c   g   h" auto
       / 1fr 1fr 1fr 1fr}
.clock time {grid-area: a; padding: 0 0.3em}
.clock .timepause {grid-area: g}
.clock .timedec {grid-area: e}
.clock .timeinc {grid-area: f}
.clock .timereset {grid-area: h}
.clock > span {grid-area: c}
.clock time b {font-family: OCR A Std, Orator Std, monospace; font-size: 1.2em}
.clock button {width: 100%;
  font-family: Noto Sans Symbols, Symbola, Noto Emoji, sans-serif}

/* When time is nearly up, make the clock orange. */
body.time-warning .fullclock, body.time-warning .clock {background:
  linear-gradient(hsl(33,100%,37%), hsl(33,90%,42%), hsl(33,100%,36%))}
/* When time is up, make the clock red. */
body[data-time-factor="100"] .fullclock,
body[data-time-factor="100"] .clock {background:
  linear-gradient(hsl(0,100%,47%), hsl(0,90%,55%), hsl(0,100%,46%))}

/* The buttons added by b6+ at the start of the slides in index mode. */
.b6-ui {text-align: center; z-index: 1; position: fixed; bottom: 0; left: 0;
  right: 0; box-shadow: 0 -2px 3px #3f235d; background: #3f235d;
  padding: 0.5em}
.b6-ui button {margin: 0 0.3em}

/* Style for the popup with the table of contents. */
.toc {width: 95%; max-width: none; max-height: 95%; box-sizing: border-box;
  overflow: auto; background: hsl(0,0%,98%); color: black;
  font-size: 2vmax; border-radius: 2em / 50%; padding: 0.2em 1.6em 1em}
.toc ol {margin: 0; columns: 18em; column-rule: thin solid; padding: 0}
.toc li {break-inside: avoid; margin-left: 2em}
.toc li::marker {color: hsl(270,85%,25%); font-weight: bold}
.toc a {text-decoration: none; color: inherit}
.toc br {display: none}
.toc button {display: block; margin: 0 0 0 auto}
.toc::backdrop {background:  hsl(270,85%,25%,0.3)}

/* Overlay canvas for drawing on a slide with the mouse. */
.b6-canvas {color: hsla(0,100%,45%,0.8); cursor: alias}

/* Printing. */
@page {
  margin: 1cm;
}
@media print {
  html {font-size: 10pt}
  body {background: none; margin: 0; columns: 41em}
  .slide {border: 0.5pt solid black; margin: 1rem 1rem 1rem 0; display: block;
    overflow: hidden}
  .comment {background: none; color: black; padding: 0;
    columns: 25em; column-rule: thin solid; column-gap: 2rem;
    widows: 2; orphans: 2; width: auto; height: auto; display: block;
    border-radius: 0; overflow: auto;
    margin: 1rem 1rem 2rem 0; box-shadow: none}
  .comment:before {content: none}
  ul {margin: 0.9em 0} /* Compensate slight differences in fonts & margins */
  .incremental.in-place, .overlay.in-place {overflow: visible} /* TODO... */
}

/* Output to PDF (trick).

   To output to PDF, print the slides to PDF while selecting a
   landscape paper size, e.g. A4 landscape or Letter landscape.

   This style sheet assumes that, when the output is in landscape
   mode, the goal is to export one slide per page, without margins,
   and omitting the comments between the slides. (On the other hand,
   to output multiple slides per page and interleave the comments,
   choose a page size in portrait mode.)

   Note: Not all user agents respect the 'size' property to set the
   size of the output. If they don't, there will be some margin
   to the right and below each slide. Prince respects the property.
   E.g, to make myslides.pdf from myslides.html:

     prince --page-size=landscape myslides.html

   W3C team can also use the ",pdfui" tool online.
*/
@media print and (orientation: landscape) {
  html {font-size: 7mm}
  .comment {display: none}
  .slide {margin: 0; page-break-after: always; box-shadow: none; border: none}

  @page {
    size: 286.22mm /*= 7 * w */ 161mm /*= 7 * N */;
    margin: 0;
  }
}
@media print and (orientation: landscape) and (min-width: 11in) {
  /* Letter-size paper */
  html {font-size: 0.26902in /*= 11 / w */}
  @page {size: 11in 6.1875in /*= 11 / A */}
}
@media print and (orientation: landscape) and (min-width: 296mm) {
  /* A4-size paper */
  html {font-size: 7.2636mm /*= 297 / w */}
  @page {size: 297mm 167.06mm /*= 297 / A */}
}