/* Style for slides to be used together with the Shower (v2 or v3) or
   b6+ script.

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

   Layout of a slide:

   +---------------------------------------+-------+
   |                   1em           white | logos |
   |   +-------------------------------+   |       |
   |   |                               |   |       |  ^
   |   |                               |   |       |  |
   |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
   w = N*A   = width of slide in rem

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

/* 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.45;
  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,
h2 {
  font-size: 2em;
  line-height: 1.1;
  margin: 0 0 0.3em 0;
  font-family: Avenir Next Condensed, Arial Narrow, Helvetica Neue, Futura,
    Carlito, Calibri, Open Sans, Helvetica, Arial, Liberation Sans, sans-serif;
  font-size-adjust: 0.496;
  font-stretch: condensed;
  background: center bottom / 100% 0.1em no-repeat
    linear-gradient(
      to right,
      hsla(205, 90%, 45%, 1),
      hsla(205, 90%, 45%, 0),
      hsla(205, 90%, 45%, 1)
    );
}
.full,
.slide {
  width: 40.889rem; /*= w */
  height: 23rem; /*= N */
}
.slide {
  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;
  border-radius: 0;
  background: 36.839rem /*= w - L/2 - 2.6/2 */ 2.4rem / 2.6rem auto no-repeat
      url(w3c_icon_transp.svg),
    36.389rem /*= w - L/2 - 3.5/2 */ 4.6rem / 3.5rem auto no-repeat
      url(OGC_Logo_2D_Blue.svg),
    36.389rem /*= w - L/2 - 3.5/2 */ 6.4rem / 3.5rem auto no-repeat
      url(logo_vertical_blue_path_with_shadow.svg),
    right center / auto 100% url(bg2.jpg) no-repeat, white;
}
.slide:target {
  outline: lime solid 0.5rem;
  outline-offset: 1rem;
}

/* Mark elements get a highlighter-like background */
mark {
  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);
}

/* Lists with circles instead of disks as bullet, and less indented */
ul,
ol {
  padding-left: 0;
}
ul > li {
  list-style: circle;
  margin-left: 1em;
}
ol > li {
  margin-left: 2em;
}

/* Slides with a image on the left (.side) or right (.side.right) one third */
.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%)) {
  .slide.side.right,
  .slide.side.r {
    padding-right: 17.217rem; /*= (w - 1 - (L + 1) - 1) * 30% + (L + 1) + 1 */
  }
  .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 */
  }
}

/* Cover pages */
.cover {
  text-align: center;
  padding-right: 12rem /*= 2 * L + 1 */;
  background-image: url(w3c_icon_transp.svg), url(OGC_Logo_2D_Blue.svg),
    url(logo_vertical_blue_path_with_shadow.svg), url(bg3.jpg);
}
.cover h1,
.cover h2 {
  font-size: 3em;
}

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

/* 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 lower right corner */
.slide::after {
  content: "[" counter(slide) "]";
  color: #0d6db6;
  position: absolute;
  text-shadow: 0 0.05em 0.1em hsla(0, 0%, 0%, 0.5);
  bottom: 0.2rem;
  right: 5.7rem /*= L + 0.2 */;
  font-size: smaller;
  line-height: 1;
  background: white;
  padding: 0.1em 0;
  text-align: center;
}
.slide.clear::after {
  content: none;
}

/* Two columns, and alternate elements in the left and right column */
.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;
  }
}

/* Striped tables */
table.striped {
  border-collapse: collapse;
}
table.striped td,
table.striped th {
  padding: 0 0.3em;
}
table.striped tr:nth-child(2n + 2) {
  background: #eee;
}

/* 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 */
.full .grow {
  transition: 3s 1s ease-in-out transform;
  position: relative;
  transform: scale(0.1);
  transform-origin: 0 50%;
}
.active .grow {
  transform: scale(1);
}

/* Notes between the slides */
.comment {
  columns: 37em;
  font-family: Times New Roman, Times, serif;
  margin: 4rem 0 0;
  widows: 2;
  orphans: 2;
}
.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.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;
}

.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;
}

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

.text--sm {
  font-size: 0.875rem;
}

.text--callout {
  display: inline-block;
  margin-bottom: 0;
  font-size: 1.25rem;
  color: #fff;
  background: #005a9c;
  padding: 0.75rem;
}

.slide img {
  max-width: 100%;
  max-height: calc(100% - 3rem);
}

h3 {
  font-size: 1rem;
  margin: 1rem 0 0.5rem;
}

code.code-block {
  display: inline-block;
  margin-top: 0.5rem;
  background-color: #f1f7ff;
  box-shadow: 0.3em 0.3em 0 rgba(0,0,0,.1);
  border: 1px solid #ccc;
  padding: 0.5rem;
}