/* === Colors === */

footer,
body a.toplevel:before,
body span.count,
section.slide:target:after,
section.slide:target + a, section.slide:target + a + a,
:target + a:before, :target + a + a:before
{ color: #888; }

body
{ background-color: #AAA;
  background-image: repeating-linear-gradient( to bottom right, #AAA, #999 8px);
}

body > .pagemenu {
  position: fixed;
  top: 0; left: 0; right: 0; z-index: 1;
  margin: 0;
  padding: .25em 2em;
  background-color: #666;
  list-style: none;
  box-shadow: 0 0 .5em;
}
body > .pagemenu li {
  display: inline-block;
  margin-right: 1em;
}
body > .pagemenu li a { color: #FFF; }

section.slide
{ background-color: #FFF;
  background-image: repeating-linear-gradient( #FFF, #EEE 4px);
}

section.slide:target:after,
footer:before, body:after
{ background-color: #EEE;
  background-image: repeating-linear-gradient(#EEE, #DDD 8px);
}

section.slide h1, section.slide h2
{ background-color: #EEE;
  background-image: repeating-linear-gradient(#EEE, #DDD 8px);
}

section.slide pre, section.slide code
{ background-color: #DDD;
  background-image: repeating-linear-gradient(#CCC, #DDD 4px);
}

section.slide:after  /* slide number on overview screen */
{ color: #AAA; }

/* === Overall Layout === */

* {
  box-sizing: border-box;
  margin: 0; padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*  min-height: 240px */     body { font-size:  9px; }
@media(min-height: 320px)  { body { font-size: 12px; } }
@media(min-height: 480px)  { body { font-size: 19px; } }
@media(min-height: 720px)  { body { font-size: 28px; } }
@media(min-height: 768px)  { body { font-size: 30px; } }
@media(min-height: 800px)  { body { font-size: 32px; } }
@media(min-height: 960px)  { body { font-size: 38px; } }
@media(min-height: 1024px) { body { font-size: 41px; } }
@media(min-height: 1080px) { body { font-size: 43px; } }
@media(min-height: 2160px) { body { font-size: 86px; } }

body {
  font-family: sans-serif;
  padding: 2.5em 1em 6em 1em;
  #background-color: #555;
  text-align: center;
  overflow-x: hidden;
}
body * {
  text-align: left;
  font-size: inherit;
}
body .center > * {
  text-align: center;
}

body:after {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 1.25em;
  content: ' ';
  #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
}

a.previous, a.next ,a.toplevel {
  text-decoration: none;
}

footer {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  font-size: .75em;
  line-height: 1.5em;
  padding: 0 0 .25em 0;
  text-align: center;
  #color: #888;
  z-index: 4;
  box-shadow: none;
  background-color: transparent;
  /* footer must not have background, so slide number is not covered */
}
footer:before {  /* fake background in case footer spans multiple lines */
  content: ' ';
  position: absolute;
  top: 0; left: 0;
  bottom: 1.5em;
  width: 100%;
  #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
  z-index: -1;
}

body a.toplevel {
  position: fixed;
  bottom: 0; left: 8em;
  width: 2ex; overflow: hidden;
  font-size: .875em;
  -padding-bottom: .25em;
  color: transparent;
  z-index: 5;
  word-break: normal;
}
body a.toplevel:before {
  #color: #888;
  content: '\2196';
}

body span.count {
  position: fixed;
  bottom: 0; left: 6.25em;
  font-size: .875em;
  line-height: 1.5em;
  -padding-bottom: .125em;
  #color: #888;
  z-index: 5;
}

/* ==== Overview Screen ==== */

section.slide, a.nextslide {
  font-size: .15625em;
}

section.slide {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 48em; height: 30em;
  margin-left: -48em;
  border: 1px solid black;
}

section.slide:after {  /* slide number */
  position: absolute;
  bottom: 0; left: 0;
  font-size: 15em;
  line-height: 1em;
  text-align: left;
  content: attr(count);
  padding-left: .125em;
  #color: #DDD;
}

section.slide + a { display: none; }
a.nextslide {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 48em; line-height: 30em;
  color: transparent;
  z-index: 2;
}
#section.slide:nth-of-type(1) { margin-right: .5em; }

/* ==== Slide Appearance ==== */

section.slide {
  #background: #FFF no-repeat center;
  text-align: center;
  line-height: 1.5em;
}

section.slide > * {
  margin-top: 1em;
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}

section.slide > *:first-child:last-child,
section.slide > h2:first-child + :last-child {
  margin-top: 20%;
  transform: translate(0, -50%);
}

section.slide h1, section.slide h2 {
  display: block;
  text-align: center;
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 1em;
  width: 100%; max-width: 100%;
  #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
}

section.slide h1,
section.slide > h1:first-child:last-child {
  margin-top: 25%;
  margin-bottom: 0;
  padding: .5em 2em;
}

section.slide h2 {
  padding: .25em 1em;
}

section.slide > table {
  width: 85%;
}
section.slide * table {
  width: 100%;
}

section.slide ul li {
  list-style-type: square;
  margin-left: 2em;
}

section.slide ul ul, section.slide ul ol,
section.slide ol ul, section.slide ol ol {
  margin-left: -1em;
}

section.slide > ul,
section.slide > ol {
  width: fit-content;
  margin: .25em auto;
}

section.slide li pre {
  margin-bottom: .25em;
}

section.slide pre, section.slide code {
  #background-color: rgba(224,224,224,128);
  font-family: monospace;
}
section.slide pre {
  padding: 1ex;
  text-align: left;
  overflow: hidden;
}
section.slide code {
  padding: 0 .5em;
}

/* ==== Slide Display ==== */

section.slide:target {
  position: fixed;
  z-index: 3;
  top: 0; bottom: 0; left: 0; right: 0;
  width: auto; height: 100%;
  margin: 0;
  border: none;
  font-size: inherit;
}

/* slide number, footer bar*/
section.slide:target:after {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  font-size: .875em;
  line-height: 1.5em;
  text-align: left;
  content: attr(count) " /";
  padding-left: 4em;
  #color: #888;
  #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
}

/* back and forth link buttons */
section.slide:target + a,
section.slide:target + a + a {
  position: static;
  display: block;
  font-size: inherit;
  line-height: 1em;
  #color: #888;
}
:target + a:before, :target + a + a:before {
  display: block;
  position: fixed;
  bottom: 0;
  #color: #888;
  padding: 0 1em .25em 1em;
  z-index: 4;
}
:target + a:before { left:  0; }
:target + a:before { content: '\22d8'; }
:target + a + a:before { right: 0; }
:target + a + a:before { content: '\22d9'; }

.uncover[type="checkbox"] + * { opacity: .2; }
.uncover[type="checkbox"]:checked + * { opacity: 1; }

.uncover[type="checkbox"] {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 100%; height: 100%;
  opacity: 0;
  z-index: 1;
}

.uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
.uncover[type="checkbox"]:checked { display: none; }