/* 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?

   Layout of a slide:

   +---------------------------------------+-------+
   |                   1em                 | logo  |
   |   +-------------------------------+   |       |
   |   |                               |   |       |  ^
   |   |                               |   |       |  |
   |1em|                               |1em| 5.5em | 23em
   |   |                               |   |       |  |
   |   |                               |   |       |  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: 13 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;
  color: white}
address {/*font-family: serif*/}
h1 {font-size: 1.5em; line-height: 1.1; margin: 0 0 0.3em 0;
  color: hsl(210,100%,30%)}
h2 {font-size: 1.0em; line-height: 1.1; margin: 0 0 0.3em 0;
  color: hsl(210,100%,30%)}
h3 {font-size: 0.8em; line-height: 1.1; margin: 0 0 0.3em 0;
  color: hsl(210,100%,30%)}
.full {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 6.5rem /*= L + 1 */ 1rem 1rem; 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; text-shadow: 0 0 1px white, 0 0 1px white,
    0 0 1px white, 0 0 1px white, 0 0 1px white;
  background: 36.389rem /*= w - L + 1 */ 18.5rem /*= N - L + 1 */
    / 3.5rem /*= L - 2 */ auto url(b6plus-logo.png) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(210,100%,30%), hsl(270,42%,92%)) no-repeat, white}
.full .slide {height: 23rem /*= N */}
.slide:target {outline: lime solid 0.5rem; outline-offset: 1rem}
.slide.side {padding-left: 11.717rem /*= (w - 1 - (L + 1) - 1) * 30% + 2 */}
.slide.side.right, .slide.side.r {padding-left: 1rem;
  padding-right: 17.217rem; /*= (w - 1 - (L + 1) - 1) * 30% + (L + 1) + 1 */}
.side .side {position: absolute; top: 4.3478% /*= 1/N */;
  left: 2.4457%; /*= 1/w */
  width: 23.764%; /*= (w - 1 - (L + 1) - 1) * 30%  / w */}
.side.right .side, .side.r .side {left: 59.606% /*= ((w - L) * 70% - 40%)/w */}
@supports (transform: translate(-50%,-50%)) {
  .side .side {top: 50%; transform: translate(-50%,-50%);
    left: 14.327%; /*= ((w - 1 - (L + 1) - 1) * 30% / 2 + 1 ) / w */}
  .side.right .side, .side.r .side {
    left: 72.221% /*= ((w - L - 1) * 85% + 30%) / w */}
}
.note {font-size: 80%}
.cover .note {font-size: 40%}

.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: black; color: white; padding: 1rem 1rem;
  columns: 25em; font-family: Times New Roman, Times, serif;
  margin: 4rem 0 0; widows: 2; orphans: 2;
  column-rule: thin solid; column-gap: 2rem}
.comment h2 {color: inherit}
.comment :link, .comment :visited {color: inherit; text-decoration: underline}
.comment code {background: #333}
.comment pre {margin-left: 1em; font-family: Helvetica, sans-serif}
.comment :first-child {margin-top: 0}
.comment dd {margin-left: 1em}
.comment ul > li::before {color: inherit}

dt {font-weight: bold}
img {max-width: 100%}
.num {font-variant-numeric: oldstyle-nums tabular-nums diagonal-fractions}
code, pre {font-family: Andale Mono, Courier, monospace}
.slide code {background: #eee; padding: 0.1em 0.3em; border-radius: 0.3em;
  text-shadow: none}
sub, sup {line-height: 0.5}
.slide pre {padding: 0 0.2em; background: black; color: hsl(48,100%,93%);
  font-size: 0.9em; text-shadow: none; width:500px; overflow:auto}
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(210,100%,30%)}

/* Explicit placement on a 3x3 grid */
.place {position: absolute; box-sizing: border-box;
  max-width: 25.589%; /*= (w - 1 - (L + 1) - 2) / 3 / w */
  top: 50%; left: 43.274%; /*= ((w - 1 - (L + 1)) / 2 + 1) / 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: 2.4457%; /*= 1/w*/ transform: translate(0,-50%);
  text-align: left}
.place.r, .place.right {left: auto; right: 15.897%; /*= (L + 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;
  padding-right: 9.8rem /*= C * L + 1 */}
.slide.cover address {position: absolute; bottom: 4.3478% /*= 1/N */;
  left: 2.4457% /*= 1/w */; right: 23.967% /*= (C * L + 1)/w */;
  line-height: 1.3}

/* Full-size image overlays */
img.cover, img.fit {position: absolute; z-index: -1; top: 0; left: 0;
  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 upper right corner */
.slide::after {content: counter(slide); color: white; position: absolute;
  top: 1rem; line-height: 1; font-weight: bold; right: 0; width: 5.5em /*= L */;
  text-align: center; text-shadow: none}
.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; top: 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::before {content: url(pause.svg); position: absolute;
  top: calc(50% - 2em); left: calc(50% - 2em); width: 4em; height: 4em;
  z-index: 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}

/* 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: 0 0.4rem 0.6rem #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%))}
.fullclock {padding: 0.3em; display: grid; justify-items: center; gap: 0.1em;
  grid: "x   y   z" auto
  	"a   b   d" auto
        "c   f   e" auto
	"c   h   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; align-self: center}
.fullclock time {padding: 0 0.3em}
.fullclock time b, .clock 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, .clock button {width: 100%; cursor: pointer;
  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: 3em; height: 3em; 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%))}
body:not(.paused) .timepause :nth-child(1) {display: none}
body.paused .timepause :nth-child(2) {display: none}
.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 button {color: white; background:
    linear-gradient(160deg, hsl(270,45%,28%), hsl(270,42%,72%))}

/* 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; position: sticky; top: 0.5em; z-index: 1;
  margin-right: 13em /* room for full clock */}
@media (max-width: 44.889em /*= w + 4 */) { .b6-ui {text-align: left} }
.b6-ui button {width: 7em; height: 7em; border-radius: 50%;
  padding: 0.2em 0.4em; color: white; margin: 0 1rem; align-items: center;
  display: inline-flex; flex-direction: column; line-height: 1.2;
  box-shadow: 0 0.4rem 0.6rem #000; vertical-align: top;
  background: linear-gradient(160deg, hsl(210,100%,30%), hsl(270,42%,78%))}
.b6-ui button span {display: block; margin: 0.1em}
.b6-ui button span:first-child {font-size: 200%}

/* Style for the popup with the table of contents. */
.toc {width: 95%; max-width: none; max-height: 95%; box-sizing: border-box;
  overflow: auto; border-radius: 1em; background: hsl(0,0%,98%); color: black}
.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 {position: absolute; top: 0.35em; right: 0.35em}
.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}

/* When the slides are displayed on a system that is in dark mode,
   give the slides a dark background. */
@media (prefers-color-scheme: dark) {
  .slide {color: hsl(0,0%,92%);
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black,
      0 0 1px black, 0 0 1px black;
    background: 36.389rem /*= w - L + 1 */ 18.5rem /*= N - L + 1 */
      / 3.5rem /*= L - 2 */ auto url(b6plus-logo.png) no-repeat,
      bottom right / 5.5em /*= L */ 100%
      linear-gradient(hsl(270,45%,12%), hsl(270,42%,46%)) no-repeat, black}
  .slide h1, .slide h2 {color: hsl(270,85%,87%)}
  .slide code {background: #444}
  .slide ul > li::before {color: hsl(270,85%,87%)}
  .slide :link {color: hsl(270,85%,87%)}
  .slide :visited {color: hsl(240,85%,87%)}
  .b6-canvas {color: hsla(130,100%,60%,0.8)}
}

/* To tell the b6plus.js script that this style sheet has rules that
   react to the class darkmode on BODY, set the --has-darkmode property on
   BODY to "1" */
body {--has-darkmode: 1}

/* When class "darkmode" is set on the BODY (which is set, e.g., by
   b6+ when the user presses the "D" key), or when class "darkmode" is
   set on a slide, use the same colors as in dark mode. */
.darkmode.slide, .darkmode .slide {color: hsl(0,0%,92%);
  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black,
    0 0 1px black, 0 0 1px black;
  background: 36.389rem /*= w - L + 1 */ 18.5rem /*= N - L + 1 */
    / 3.5rem /*= L - 2 */ auto url(b6plus-logo.png) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(270,45%,12%), hsl(270,42%,46%)) no-repeat, black}
.darkmode.slide h1, .darkmode.slide h2,
.darkmode .slide h1, .darkmode .slide h2 {color: hsl(270,85%,87%)}
.darkmode.slide code, .darkmode .slide code {background: #444}
.darkmode.slide ul > li::before, .darkmode .slide ul > li::before {
  color: hsl(270,85%,87%)}
.darkmode.slide :link, .darkmode .slide :link {color: hsl(270,85%,87%)}
.darkmode.slide :visited, .darkmode .slide :visited {color: hsl(240,85%,87%)}
.darkmode .b6-canvas {color: hsla(130,100%,60%,0.8)}

/* When class "lightmode" is set on the BODY or when class "lightmode" is
   set on a slide, force the default colors and ignore dark mode. */
.lightmode.slide, .lightmode .slide {color: black;
  text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white,
    0 0 1px white, 0 0 1px white;
  background: 36.389rem /*= w - L + 1 */ 18.5rem /*= N - L + 1 */
    / 3.5rem /*= L - 2 */ auto url(b6plus-logo.png) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(270,45%,25%), hsl(270,42%,92%)) no-repeat, white}
.lightmode.slide h1, .lightmode.slide h2,
.lightmode .slide h1, .lightmode .slide h2 {color: hsl(270,85%,25%)}
.lightmode.slide code, .lightmode .slide code {background: #eee}
.lightmode.slide ul > li::before, .lightmode .slide ul > li::before {
  color: hsl(270,85%,25%)}
.lightmode.slide :link, .lightmode .slide :link {color: purple;
  color: linktext}
.lightmode.slide :visited, .lightmode .slide :visited {color: blue;
  color: visitedtext}
.lightmode .b6-canvas {color: hsla(0,100%,45%,0.8)}

/* Printing. */
@page {
  margin: 1cm;
}
@media print {
  html {font-size: 10pt}
  body {background: none; margin: 0; columns: 41em; column-gap: 4em;
    column-rule: 0.5pt solid black}
  .slide {border: 0.5pt solid black; margin: 1rem 1rem 1rem 0; display: block;
    margin: 2.3rem auto;
    overflow: hidden; page-break-inside: avoid}
  ul {margin: 0.9em 0} /* Compensate slight differences in fonts & margins */
  .comment {background: none; color: black; padding: 0;
    margin: 1rem 1rem 1rem 0}
  .comment code {background: #eee}
  .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 */}
}