/* Style for the slides for TPAC 2020, to be used together with the
   Shower script or the b6+ script. For usage instructions, see
   https://www.w3.org/2020/Talks/TPAC/Templates/Overview.html

   The design is by Kenzo Ishida and is based on the style for the
   TPAC pages by Tanya Mandal.

   TODO: Styles for blockquotes?

   TODO: Provide a fallback for side images for UAs that do not
   implement 'object-fit'?

   Layout of a slide:

   +---------------------------------------+-------+
   |                   2em                 | LOGO  |
   |   +-------------------------------+   |       |
   |   |                               |   |       |  ^
   |   |                               |   |       |  |
   |2em|                               |1em|  3em  | 23em
   |   |                               |   |       |  |
   |   |                               |   |       |  v
   |   +-------------------------------+   |       |
   |                   1em                 |   nr  |
   +---------------------------------------+-------+

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

   Created: 2 September 2020
   Author: Bert Bos <bert@w3.org>
   Copyright © 2020 W3C
*/

@font-face {
    font-family: My Lato;
    font-style: normal;
    font-weight: normal;
    src: url(Lato-Regular.woff2) format("woff2"),
	 url(Lato-Regular.woff) format("woff");
    src: local(Lato Regular), local(Lato-Regular),
 	 url(Lato-Regular.woff2) format("woff2"),
	 url(Lato-Regular.woff) format("woff");
}
@font-face {
    font-family: My Lato;
    font-style: normal;
    font-weight: bold;
    src: url(Lato-Bold.woff2) format("woff2"),
	 url(Lato-Bold.woff) format("woff");
    src: local(Lato Bold), local(Lato-Bold),
	 url(Lato-Bold.woff2) format("woff2"),
	 url(Lato-Bold.woff) format("woff");
}
@font-face {
    font-family: My Lato;
    font-style: italic;
    font-weight: normal;
    src: url(Lato-Italic.woff2) format("woff2"),
	 url(Lato-Italic.woff) format("woff");
    src: local(Lato Italic), local(Lato-Italic),
	 url(Lato-Italic.woff2) format("woff2"),
	 url(Lato-Italic.woff) format("woff");
}
@font-face {
    font-family: My Lato;
    font-style: italic;
    font-weight: bold;
    src: url(Lato-BoldItalic.woff2) format("woff2"),
	 url(Lato-BoldItalic.woff) format("woff");
    src: local(Lato Bold Italic), local(Lato-BoldItalic),
	 url(Lato-BoldItalic.woff2) format("woff2"),
	 url(Lato-BoldItalic.woff) format("woff");
}
@font-face {
  font-family: My Montserrat;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(Montserrat-BlackItalic.woff) format("woff");
  src: local(Montserrat Black Italic), local(Montserrat-BlackItalic),
       url(Montserrat-BlackItalic.woff) format("woff");
}
@font-face {
  font-family: My Montserrat;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(Montserrat-Black.woff) format("woff");
  src: local(Montserrat Black), local(Montserrat-Black),
       url(Montserrat-Black.woff) format("woff");
}

@font-face {
  font-family: My Montserrat;
  font-style: italic;
  font-weight: bold;
  font-display: swap;
  src: url(Montserrat-BoldItalic.woff) format("woff");
  src: local(Montserrat BoldItalic), local(Montserrat-BoldItalic),
       url(Montserrat-BoldItalic.woff) format("woff");
}

@font-face {
  font-family: My Montserrat;
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url(Montserrat-Bold.woff) format("woff");
  src: local(Montserrat Bold), local(Montserrat-Bold),
       url(Montserrat-Bold.woff) format("woff");
}


/* Common layout independent of slide mode */
html {font: 1em/1.3 My Lato, Carlito, Calibri, Open Sans, Helvetica Neue,
    Helvetica, Arial, Liberation Sans, sans-serif;
  font-size-adjust: 0.497 /* Lato */}
body {background: url(linen.png) #595b60; counter-reset: slide; margin: 2em;
  color: white}
.slide p, .slide ul, .slide ol, .slide pre, .slide blockquote, .slide li {
  margin: 0.6em 0}
.slide h1, .slide h2, .slide address {margin: 0 0 0.6em 0;
  font: 900 2em/1.1 My Montserrat, Arial Black, Myriad Pro, Roboto, sans-serif;
  font-size-adjust: 0.542}
.slide address {color: hsl(356,67%,43%); font-size: 1.4em}
.slide h3 {font-size: 1.1em; color: hsl(356,67%,43%);
  margin: 0.8em 0 0.48em 0}
.full, .slide {width: 40.889rem; /*= w */ height: 23rem; /*= N */}
.slide {color: hsl(204,67%,19%); box-shadow: 0 0.4em 0.6em #000;
  line-height: 1.6;
  word-break: normal; overflow-wrap: normal; letter-spacing: normal;
  padding: 2em 5em /*= L + 1 */ 1em 2em;
  position: relative;
  box-sizing: border-box; z-index: 0; display: inline-block;
  margin: 4em 2em 0 0; vertical-align: bottom; counter-increment: slide;
  border-radius: 0.5em;
  text-shadow: 0 0 1px hsl(208,19%,88%), 0 0 1px hsl(208,19%,88%),
    0 0 1px hsl(208,19%,88%), 0 0 1px hsl(208,19%,88%);
  background: hsl(208,19%,88%)}
.secondwindow .slide.active,
.slide:target {outline: lime solid 0.5em; outline-offset: 1em}
.slide h3 a {color: inherit}

/* EM elements get a highlighter-like background */
.slide em {font-style: normal;
  text-shadow: none; background:  hsl(62,100%,50%)}

/* Lists with less indent */
.slide li {margin-left: 1em}
.slide ol, .slide ul {padding: 0}
.slide li ul, .slide li ol, .slide li li {margin-top: 0.1em; margin-bottom: 0.2em}

/* Own counter, because FF & Safari don't apply text-shadow to the default. */
.slide ol {counter-reset: ol; list-style: none}
.slide ol > li {counter-increment: ol}
.slide ol > li::before {/*float: left;*/ display: inline-block; width: 2em;
  margin-left: -2em; text-align: right; content: counter(ol) ".\A0"}
.slide ol > li > p:first-child {display: inline}
.slide ol[start="2"] {counter-reset: ol 1}
.slide ol[start="3"] {counter-reset: ol 2}
.slide ol[start="4"] {counter-reset: ol 3}
.slide ol[start="5"] {counter-reset: ol 4}
.slide ol[start="6"] {counter-reset: ol 5}
.slide ol[start="7"] {counter-reset: ol 6}
.slide ol[start] {counter-reset: ol calc(attr(start integer) - 1)}

/* Slides with an image on the left (.side) or right (.side.right) one third */
.slide.side {padding-left: 12.867em /*= 2 + (w - L - 4) * 30% + 1 */}
.slide.side.right, .slide.side.r {padding-left: 2em;
  padding-right: 15.867em; /*= L + 1 + (w - L - 4) * 30% + 1 */}
.side .side {position: absolute; top: 3em /* top margin + a bit */; left: 2em;
  height: 19em /*= N - 4 */; object-fit: contain;
  width: 9.8667em /*= (w - L - 4) * 30% */}
.side .side.cover {object-fit: cover; top: 0; left: 0; height: 23em /*= N */;
  width: 11.867em /*= (w - L - 4) *30% + 2 */}
.side.right .side, .side.r .side {
  left: 26.022em /*= w - L - 1 - (w - L - 4) * 30% */}
.side.right .side.cover, .side.r .side.cover {
  width: 14.867em /*= L + 1 + (w - L - 4) * 30% */}

/* Slides with a big, square image on the left or right */
.slide.side.big {padding-left: 24em /*= N + 1 */}
.slide.side.right.big, .slide.side.r.big {padding-left: 2em;
  padding-right: 24em /*= N + 1 */}
.side.big .side {top: 2em; left: 2em;
  height: 19em /*= N - 4 */; width: 21em /*= N - 2 */}
.side.big.right .side, .side.big.r .side {left: 17.889em /*= w - N */}
.side.big .side.cover {object-fit: cover; top: 0; left: 0;
  height: 23em /*= N */; width: 23em /*= N */}
.side.big.right .side.cover, .side.big.r .side.cover {
  left: 17.889em /*= w - N */}

/* Cover pages */
.slide.cover {background: 2em 4em / auto 5.5em /*= N/2 - 4 - 2 */
    url(TPAC-2020-slides-banner.svg) no-repeat,
    21.444em /*= w/2 + 1 */ 50% / 22.944em /*= w/2 + 2.5 */ auto
    url(conference-call-3.png) no-repeat,
    radial-gradient(16.263em /*= sqrt(2) * N/2 */ circle
      at 52.389em /*= w + N/2 */ 50%, hsl(204,67%,19%),
      hsl(204,67%,19%) 16.263em /*= sqrt(2) * N/2 */,
      hsl(208,19%,88%) 16.264em /*= sqrt(2) * N/2 + 0.001 */);
  padding-top: 11.5em /*= N/2 */; padding-right: 21.444em /*= w/2 + 1 */}

/* Last page */
.slide.final {background: 1em 17.803em /*= N - 1 - (L - 1)/H */
    / 3em /*= L - 1 */ auto url(TPAC-2020-slides-banner.svg) no-repeat,
    21.444em /*= w/2 + 1 */ 50% / 22.944em /*= w/2 + 2.5 */ auto
    url(conference-call-3.png) no-repeat,
    radial-gradient(16.263em /*= sqrt(2) * N/2 */ circle
      at 52.389em /*= w + N/2 */ 50%, hsl(204,67%,19%),
      hsl(204,67%,19%) 16.263em /*= sqrt(2) * N/2 */,
      hsl(208,19%,88%) 16.264em /*= sqrt(2) * N/2 + 0.001 */);
  padding-left: 5em /*= L + 1 */;
  padding-right: 21.444em /*= w/2 + 1 */}

/* Notes in a smaller font */
.slide .note {font-size: 70%}

/* Miscellaneous styles */
.num {font-variant-numeric: oldstyle-nums tabular-nums diagonal-fractions}
.slide code, .slide pre {font-family: Andale Mono, Courier, monospace;
  text-shadow: none}
.slide 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%);
  text-shadow: none}

/* Explicit placement on a 3x3 grid */
.place {position: absolute; box-sizing: border-box;
  max-width: 25.996%; /*= (w - L - 5) / 3 / w */
  top: 50%; left: 46.332%; /*= (2 + (w - L - 2 - 1)/2) / w */
  transform: translate(-50%, -50%); text-align: center}
.place.t, .place.top {top: 8.6957%; /*= 2/N */ transform: translate(-50%,0)}
.place.b, .place.bottom {top: auto; bottom: 8.6957% /*= 2/N */;
  transform: translate(-50%,0)}
.place.l, .place.left {left: 4.8913%; /*= 2 / w */
  transform: translate(0,-50%); text-align: left}
.place.r, .place.right {left: auto; right: 12.228%; /*= (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: #aaa; text-align: right; white-space: pre-line;
  text-shadow: none;
  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.2em; font-family: serif;
  border-right: thin solid; padding-right: 0.2em}

/* White-on-black pages */
.slide.white {color: white; background-color: black;
  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black}
.slide.white address {color: hsl(356,67%,46%)}
.slide.white ul > li::before,
.slide.white code {background: #444}
.slide.white :link {color: inherit; background: hsla(240,100%,20%,0.3)}
.slide.white :visited {color: inherit; background: hsla(270,100%,20%,0.3)}
.slide.white :link, .slide.white :visited {padding: 0.1em 0.3em;
  border-radius: 0.3em}

/* Full-size image overlays */
img.cover, img.fit {position: absolute; z-index: -1; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover; padding: 0}
img.fit {object-fit: contain}

/* Logo in upper right, slide number in lower right (in a speech bubble) */
.slide::after {content: counter(slide); color: black; position: absolute;
  top: 1em; bottom: 0; line-height: 1; right: 0; text-shadow: none;
  width: 4em /*= L */; padding-top: 19.1em /*= N - 1 - 1.5 - 1.40 */;
  text-align: center; font: bold 1em/1 My Montserrat, sans-serif;
  background: 50% 18.95em /*= N - 1 - 1.5 - 1.55 */
    / 3em 1.55em url(bubble.svg) no-repeat,
    0 0 / 3em /*= L - 1 */ auto url(TPAC-2020-slides-banner.svg) no-repeat}
.slide.cover::after, .slide.final::after { /* No logo on cover page */
  background: 50% 100% / 3em 1.55em url(bubble.svg) no-repeat}
.slide.clear::after {content: none /* or " " to only omit the slide number */;
  background: 0 0 / 3em /*= L - 1 */ auto
    url(TPAC-2020-slides-banner.svg) no-repeat}
.slide.cover.clear::after, .slide.final.clear::after {/*content: none*/}

/* Two columns, and alternate elements in the left and right column */
.slide .columns > * {box-sizing: border-box;
  width: 47.134% /*= (w - L - 4)/2/(w - L - 2) */; float: right}
.slide .columns > *:nth-child(odd) {clear: both; float: left}
.slide .columns {overflow: hidden}
.slide .columns > :nth-child(-n+2),
.slide .columns > :nth-child(-n+2) > :first-child {margin-top: 0}
@supports (display: grid) {
  .slide .columns {overflow: visible; display: grid; grid: "a  b" / 1fr 1fr;
    grid-gap: 0 2em; justify-items: normal}
  .slide .columns > * {width: auto}
}

/* 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 li::before {content: none}
.tree code {background: none; font-family: Gill Sans MT, Gill Sans,
  My Gill Sans, Liberation Sans, sans-serif}
.comment .tree code {font-family: serif}

/* Striped tables */
table.striped {border-collapse: collapse; margin-bottom:0.48em; width: 100%}
table.striped td, table.striped th {padding: 0.15em 0.3em; font-size: 0.93em; text-align: left}
table.striped tr:nth-child(2n+2) {background: #EEE; text-shadow: none}

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

/* Animation of a slowly growing element */
.full .grow {transition: 3s 1s ease-in-out transform;
  position: relative; transform: scale(0.1); transform-origin: 0 50%}
.active .grow {transform: scale(1)}

/* Figures, and images with collapsed descriptions  */
img {max-width: 100%;}
figure {text-align: center; margin: 0.6em 0}
figure img, summary img {display: block; margin: 0.6em auto;
  max-height: 15.6em /*= N - 2 - 1.1 * 2 - 0.6 * 2 - 2 */}
.slide summary {list-style: none} /* Hide the triangle */
.slide summary::-webkit-details-marker {display: none} /* Ditto webkit/blink */
.slide [open] summary img {max-height: 4em}
.slide summary {outline: none}
.slide summary::before {content: "⊖"; float: left; width: 0.9em;
  margin-left: -1.1em; text-align: left; line-height: 0.9}
.slide [open] > summary::before {content: "⊕"}
.slide summary:focus::before {outline: thin solid blue;
  outline: thin solid invert}

/* Notes between the slides */
.comment {background: hsl(50,80%,90%); color: black; padding: 1em 1em;
  columns: 37em; font-family: serif; border-radius: 0.5em; margin: 4em 0 0;
  widows: 2; orphans: 2; hyphens: auto}
.comment :first-child {margin-top: 0}

/* Layout in slide mode (when body has class=full) */
.full, .full .slide {position: absolute; overflow: hidden}
.full {top: 50%; left: 50%; background: black;
  margin: -11.5em /*= -N/2 */ 0 0 -20.444em /*= -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}

.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));
  z-index: 1; transition: 0.5s}

/* Reveal elements one by one */
.full .next:not(.active) {visibility: hidden}

/* Dim previously revealed elements (only with b6+) */
.full .incremental > .visited,
.full .overlay > .visited,
.full .next.visited {opacity: 0.3}

/* Transitions between slides */
.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:not(.visited),
.full .slide.fade-in + .comment + .active:not(.visited),
.fade-in .slide.active:not(.visited) {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:not(.visited),
.full .slide.slide-in + .comment + .active:not(.visited),
.slide-in .slide.active:not(.visited) {animation: leftin 1s 1}
@keyframes leftout {
    from {transform: translate(0%, 0); visibility: visible}
    to {transform: translate(-100%, 0); visibility: visible}
}
@keyframes leftin {
    from {transform: translate(-100%, 0); visibility: visible}
    to {transform: translate(0%, 0); visibility: visible}
}

/* Transition: move-left */
.full .slide.move-left.visited,
.move-left .slide.visited {animation: leftout 1s 1}
.full .slide.move-left + .active:not(.visited),
.full .slide.move-left + .comment + .active:not(.visited),
.move-left .slide.active:not(.visited) {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 1s 1}
.full .slide.move-up + .active:not(.visited),
.full .slide.move-up + .comment + .active:not(.visited),
.move-up .slide.active:not(.visited) {animation: bottomin 1s 1}
@keyframes topout {
    from {transform: translate(0, 0%); visibility: visible}
    to {transform: translate(0, -100%); visibility: visible}
}
@keyframes bottomin {
    from {transform: translate(0, 100%); visibility: visible}
    to {transform: translate(0, 0%); visibility: visible}
}

/* 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:not(.visited),
.full .slide.flip-up + .comment + .active:not(.visited),
.flip-up .slide.active:not(.visited) {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:not(.visited),
.full .slide.flip-left + .comment + .active:not(.visited),
.flip-left .slide.active:not(.visited) {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:not(.visited),
.full .slide.center-out + .comment + .active:not(.visited),
.center-out .slide.active:not(.visited) {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:not(.visited),
.full .slide.wipe-left + .comment + .active:not(.visited),
.wipe-left .slide.active:not(.visited) {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:not(.visited),
.full .slide.zigzag-left + .comment + .active:not(.visited),
.zigzag-left .slide.active:not(.visited) {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:not(.visited),
.full .slide.zigzag-right + .comment + .active:not(.visited),
.zigzag-right .slide.active:not(.visited) {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:not(.visited),
.full .slide.cut-in + .comment + .active:not(.visited),
.cut-in .slide.active:not(.visited) {animation: cut-in 1s 1}
@keyframes cut-in {
  from {transform: translate(-100%, -100%)}
  to {transform: translate(0%, 0%)}
}

/* Not sure why Shower makes a section with class=region... */
section.region {display: none}


@page {
  margin: 1cm;
  @bottom-center {content: counter(page)}
}
@media print {
  html {font-size: 10pt}
  body {background: none; color: black; margin: 0; columns: 40.889em /*= w */;
    column-gap: 4em; column-rule: 0.2pt solid}
  .slide {border: 0.2pt solid black; margin: 2em auto; display: block;
    overflow: hidden; break-inside: avoid; box-shadow: none}
  .comment {background: none; padding: 0; columns: 1}
}

/* Trick: If the viewport is exactly w x h or 1.2w x 1.2h,
   it means the slides are
   being shown inside an iframe of that size. Hide everything except
   the targeted slide in that case and omit the black background,
   which would otherwise be visible around the rounded corner of the
   slide. (When JavaScript is on, adding ?full to the end of the slide
   URL, e.g., ".../myslides.html?full#intro", has a similar effect and
   doesn't require the iframe to be this exact size.) */
@media (min-width: 40.839em /*= w - 0.05 */) and
    (max-width: 40.939em /*= w + 0.05 */) and
    (min-height: 22.95em /*= N - 0.05 */) and
    (max-height: 23.05em /*= N + 0.05 */),
    (min-width: 49.017em /*= 1.2 * w - 0.05 */) and
    (max-width: 49.117em /*= 1.2 * w + 0.05 */) and
    (min-height: 27.55em /*= 1.2 * N - 0.05 */) and
    (max-height: 27.65em /*= 1.2 * N + 0.05 */) {
  html {font-size: calc(100vh / 23)}
  body {margin: 0; overflow: hidden}
  body, .full {background: transparent}
  body > *:not(.slide), .comment, .comment.long {display: none}
  .slide {visibility: hidden; box-shadow: none; margin: 0}
  .slide:target, .slide.active {visibility: visible; outline: none}
  .slide.active ~ .slide:target, .slide:target ~ .slide.active {
    visibility: hidden}	/* If both .active and :target, only one is visible */
}

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