img {max-width: 100%}
li:first-child {margin-top: 0} /* Helps with '.col > h2' */

/* Vertically and horizontally center text that is marked .veryshort
   (i.e., text that is very big and short). */
.veryshort {text-align: center; position: absolute; top: 50%;
  left: 50%; transform: translate(-50%,-50%)}

ul > li::before {background: #CB6628} /* Orange instead of blue */

/* Make the image on the cover page as wide as possible. */
img.large {float: none; max-width: none; margin: 1em 0; width: 90%}

/* Background image for the cover page. */
x #cover {background: url(jess-watters-483666-unsplash-frame.jpg)
  center center / 100% 100% no-repeat white}
x #cover > *:not(h1) {/*color: white;*/
  /*text-shadow: 0px 0px 4px #fff;*/
  /*text-shadow: 1px 1px 4px black*/}
x #cover > *:not(h1) {margin-left: 52%}
x #coverimage img {position: absolute; width: 45%; top: 50%; left: 25%;
  margin: 0; transform: translate(-50%,-50%)}
x #cover p {clear: left}
x #coverimage {float: left; width: 50%; width: calc(50% - 1em);
  margin: 0 2em 1em 0}
x #cover > * {overflow: auto}

/* A fancy font for the subtitle on the cover page. */
#cover h2 {font-weight: normal; font-size: 140%; line-height: 1.3;
  font-family: Snell Roundhand, Savoye LET, Apple Chancery, SignPainter,
  cursive}

/* H2 inside .col is displayed sideways */
@supports (writing-mode: sideways-lr) {
  x .col > h2 {writing-mode: sideways-lr; float: left; margin: 0 0 0 -1em}
  x .col > h2:first-child + * {margin-top: 0}
}

/* Add a stretchy curly brace on the left of a .collection */
.collection {display: inline-block; vertical-align: middle;
  padding-left: 0.6em;
  background: url(cb-top.png) 0% 0% / 0.6em auto no-repeat,
    url(cb-bottom.png) 0% 100% / 0.6em auto no-repeat,
    url(cb-middle.png) 0% 50% / 0.6em auto no-repeat,
    url(cb-stroke.png) 0% 0% / 0.6em 100% no-repeat}

/* Center text on the cover page (except for the H1). */
#cover {text-align: center}

/* Emphasize elements by making them white on blue with a thin drop
   shadow. */
.slide em {font-style: normal; font-size: 1em; background: /*#005a9c*/ #72A4C8;
  background: hsl(206,41%,90%);
  padding: 0.05em 0.2em; border-radius: 0.2em; /*color: white;*/
  /*text-shadow: 1px 1px black; box-shadow: 1px 1px black;*/
  box-decoration-break: clone}
x .slide em {font-size: 1em; background: 0 0 / 100% 100% url(highlighter)}
.slide h1 em {background: none; color: inherit; padding: 0}

/* The outline of the presentation is a list in two columns. */
.outline {columns: 2; column-rule: thin solid #72A4C8; font-size: 80%;
  line-height: 1.6em}
.outline em {font-size: 125%}
.outline > li {list-style: decimal}
.outline > li::before {content: none}

/* Make the check marks on #authors2 align vertically. */
#authors2 span {display: inline-block; width: 1em}

/* Show list of page categories on #categories in two columns. */
#categories ul {columns: 2; column-rule: thin solid #72A4C8}

/* Make a visible space. */
.space {color: red; background: #DDD; border: 0.05em solid red; line-height: 1;
  border-radius: 0.2em; display: inline-block; padding: 0 0.1em}
.space::before {content: "SP"; font-size: 70%}

/* Fairly large images on the left of a slide. */
.illustration {float: left; max-width: 30%; margin: 0 2em 15em 0}

/* Small decorative images in the bottom right corner. */
.genie {position: absolute; bottom: 5%; right: 1%; width: 4em}

/* A kind of annotation */
.note {float: right; max-width: 14em; /*max-width: calc(50% - 1.1em);*/
  margin: 0 0 0 0em; color: #005A9C;
  font: 90%/1.2 "Handwriting - Dakota", Bradley Hand, Pecita, Steve,
    Caflisch Script Pro, Schoolhouse Cursive B, cursive;
  position: relative; transform: rotate(-5deg)}
.note ~ .note {transform: rotate(-2deg)}
.note ~ .note ~ .note {transform: rotate(-4deg)}

/* Color patches */
.color-patch {display: inline-block; width: 1.5em; text-align: center}

/* Inline logo */
.logo {height: 1em; vertical-align: middle}

/* Progress bar turned into a pop-up ToC at the bottom */
p.progress {top: auto; bottom: 0; left: 16%; right: 16%; height: 0;
  font-size: 60%; line-height: 1.2; transition: 0.3s; z-index: 2;
  padding: 1em 0.5em 0; columns: 2; text-align: left; overflow: hidden}
p.progress a {display: block}
p.progress a::after {content: attr(title)}
p.progress:hover {height: auto; background: #ddd; padding-bottom: 1em}

/* Show underlining on a word in the Devanagari script */
[lang=hi]:hover {text-decoration: underline}

/* Make the table on #authors2 look like a list */
#authors2 td:first-child::before {content: " "; display: inline-block;
  background: #CB6628; width: 0.6em; height: 0.6em; margin: 0 0.5em 0 0}
#authors2 th {text-align: left}
#authors2 td, #authors2 th {padding: 0.2em 0.2em 0.2em 0}

/* Bōten marks as emphasis */
em.boten {background: none; text-emphasis: dot}