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

   This is a variation of "TPAC-2019-slides.css". The logo in the
   corner is no longer square, but includes the words "AC 2020". Cover
   pages have a faint, stylized skyline of Seoul along the bottom.

   TODO: Styles for tables? blockquotes?

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

   +---------------------------------------+-------+
   |                   1em                 |       |
   |   +-------------------------------+   |       |
   |   |                               |   |       |  ^
   |   |                               |   |       |  |
   |1em|                               |1em| 5.5em | 23em
   |   |                               |   |       |  |
   |   |                               |   |       |  v
   |   +-------------------------------+   |       |
   |                   1em                 | LOGO  |
   +---------------------------------------+-------+

   Created: 17 March 2020
   Author: Bert Bos <bert@w3.org>
*/

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(Gill_Sans.eot) format("embedded-opentype"),
    url(Gill_Sans.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: bold;
  src: url(Gill_Sans_Bold.eot) format("embedded-opentype"),
    url(Gill_Sans_Bold.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: bold;
  src: url(Gill_Sans_Bold_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Bold_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(Gill_Sans_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Italic.woff) format("woff")}

@font-face {
  font-family: LeagueGothicRegular;
  src: url(League_Gothic-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal}

/* Common layout independent of slide mode */
html {font-size: 1.156em}
body {background: url(linen.png) #595b60; counter-reset: slide; margin: 2em;
  color: white}
.slide address {font-family: Garamond Premier Pro, Garamond, serif}
.slide h1 {font: 2em/1.1 League Gothic, LeagueGothicRegular, sans-serif;
  letter-spacing: 0.03em; margin: 0 0 0.3em 0; text-transform: uppercase;
  color: #015ca4}
.slide h2 {font-size: 1.2em; font-weight: bold}
.full, .slide {width: 40.889rem; /*= w */ height: 23rem; /*= N */}
.slide {color: black; box-shadow: 0 0.4em 0.6em #000;
  word-break: normal; overflow-wrap: normal;
  font: 1em/1.6 Gill Sans MT, Gill Sans, My Gill Sans, Liberation Sans,
  DejaVu Sans, sans-serif; font-size-adjust: 0.45;
  font-variant-numeric: oldstyle-nums tabular-nums; letter-spacing: normal;
  padding: 1em 6.5em /*= L + 1 */ 1em 1em; 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 white, 0 0 1px white, 0 0 1px white, 0 0 1px white;
  background: 36.389em /*= w - L + 1 */ 16.308em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(AC-2020-slides-banner.svg) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(211,45%,25%), hsl(205,42%,92%)) no-repeat, #fff}
.secondwindow .slide.active,
.slide:target {outline: lime solid 0.5em; outline-offset: 1em}
.slide.side {padding-left: 11.717em /*= (w - 1 - (L + 1) - 1) * 30% + 2 */}
.slide.side.right, .slide.side.r {padding-left: 1em;
  padding-right: 17.217em; /*= (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%}
.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)}
.slide .columns > * {box-sizing: border-box;
  width: 47.005% /*= (w - L - 4)/2/(w - L - 2) */; float: right}
.slide .columns > *:nth-child(odd) {clear: both; float: left}
.slide .columns {overflow: hidden}
@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}
}
.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}
.comment :first-child {margin-top: 0}
img {max-width: 100%}
.num {font-variant-numeric: oldstyle-nums tabular-nums diagonal-fractions}
.slide code, .slide pre {font-family: Andale Mono, Courier, monospace}
.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}
.slide ol > li {margin-left: 2em}
.slide ul > li {margin-left: 1em}
.slide ol, .slide ul {margin: 1em 0; padding: 0}
.slide li ul, .slide li ol {margin: 0}
.slide ul > li {list-style: none}
.slide ul > li::before {content: "\25A0"; display: inline-block; width: 1em;
  margin-left: -1em; color: #015ca4}

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

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

/* Cover pages */
.slide.cover {text-align: center;
  background: 33.639em /*= w - C * L + 1 + L/2 */ 16.308em /*= N - L/H + 1 */
      / 3.5em /*= L - 2 */ auto url(AC-2020-slides-banner.svg) no-repeat,
    bottom right / 11em /*= 2 * L */ 100%
      linear-gradient(hsl(211,45%,25%), hsl(205,42%,92%)) no-repeat,
    33% 89% / 30% auto url(shutterstock_1355922929.png) no-repeat #fff;
  padding-right: 12em /*= C * L + 1 */}
.slide.cover address {line-height: 1.3; font-size: 2em /*= C * 1 */}
.slide.cover h1 {font-size: 4em; /*= C * 2 */}

/* 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 ul > li::before,
.slide.white h1 {color: hsl(207,99%,75%)}
.slide.white code {background: #444}
.slide.white :link {color: hsl(240,100%,90%)}
.slide.white :visited {color: hsl(270,100%,90%)}

/* 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: 1em; line-height: 1; font-weight: bold; right: 0; width: 5.5em /*= L */;
  text-shadow: none; 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;
  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}

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

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

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

.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}
}
.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}
}
.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}
}
.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}
}
.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}
}
.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}
}
.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%)}
}
.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}

.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%)}
}
.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%)}
}
.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%)}
}

/* A section with aria-live=assertive, which should be spoken, but not
   displayed. (b6+ adds this style by itself, but Shower relies on the
   style sheet setting it.)*/
[role=region][aria-live=assertive] {position: absolute; top: 0; left: 0;
  clip: rect(0 0 0 0)}

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

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

/* Printing. */
@page {
  margin: 1cm;
  @bottom-center {content: counter(page)}
}
@media print {
  html {font-size: 10pt}
  body {background: none; margin: 0; columns: 41em}
  .slide {border: 0.5pt solid black; margin: 1em 1em 1em 0; display: block;
    overflow: hidden}
  ul {margin: 0.9em 0} /* Compensate slight differences in fonts & margins */
}