.shower {
  --accent: #453688;
}

html, body:not(.full) {
  min-height: 100%;
}

/* Title and title slide */
body {
  padding-top: 30px !important;
}
.series {
  font-size: .6em;
  color: #737373 !important;
}
.caption h1 {
  line-height: 1.3;
  margin-bottom: -.25em;
}
.title.slide h2 {
  line-height: 41pt;
  font-size: 48pt;
  letter-spacing: -1px;
  margin: 112px 0 33px -2px;
  max-width: 600px;
  line-height: 84px;
}
.title.slide .series {
  line-height: 58px;
}
.module:not(:hover),.series:not(:hover) {
  background-position: 0 2em !important;
}
.ugent {
  position: absolute;
  bottom: 284px;
  right: -31px;
  height: 250px;
}
.imec {
  position: absolute;
  bottom: 218px;
  right: 9px;
  height: 146px;
}
.idlab {
  position: absolute;
  bottom: 153px;
  right: 51px;
  height: 76px;
}
.list > header .links {
  font-size: .45em;
  font-style: italic;
  margin-top: 1em;
  line-height: 1.5;
}

/* Navigation sidebar */

.shower.full nav {
  display: none;
}

nav {
  font-size: 80%;
  line-height: 1.66;

  position: fixed;
  z-index: 10;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: .5s transform;

  padding: 1em;

  color: white;
  background: var(--accent);

  cursor: pointer;
}

nav:not(:hover) {
  transform: translate(calc(100% - 2em), -50%);
  transition: .5s .5s transform;
}

nav h2 {
  font-weight: bold;
  margin-bottom: .33em;
}

nav ol {
  counter-reset: topic;

  margin-left: 1em;
}
nav ol li:before {
  counter-increment: topic;
  content: counter(topic) '. '; */
}

/* General */
.slide h3 {
  margin-bottom: 0;
}
.slide h3 + dl, .slide h3 + ul {
  margin-top: 42px;
}
ins {
  color: #D76016;
  text-decoration: none;
}
abbr {
  text-decoration: none;
}
cite {
  font-style: italic;
}

/* License information */
.slide p.license {
  font-size: .3em;
  line-height: 1.5em;
  width: 370px;
  position: absolute;
  bottom: 52px;
}
.slide p.license img {
  display: block;
  float: left;
  height: 42px;
  margin-right: 20px;
}
footer p.license img {
  margin: 0 .5em -.15em 0;
}

/* Content table slides */
.slide.toc h2 {
  top: 34px;
  left: 60px;
  bottom: auto;
  right: auto;
  line-height: 48px;
  font-style: normal;
}
.slide.toc ul {
  font-style: italic;
}

/* Code */
.slide pre {
  margin-bottom: 38px;
}
.slide pre.scroll {
  max-height: 420px;
  overflow: scroll;
}
.slide li li code {
  letter-spacing: -.5px;
}

.element {
  cursor: pointer;
}
.element:hover {
  color: #453688;
}
.element .element:hover {
  color: #D76016;
}
.element .element .element:hover {
  color: #737373;
}
.element:hover:before {
  content: 'element';
  position: absolute;
  left: 20px;
  font-family: 'Open Sans';
  font-style: italic;
  line-height: 1.6;
}
.element .element:before {
  left: 40px;
}
.element .element .element:before {
  left: 60px;
}
.tag {
  font-weight: bold;
}
.tag:hover:before {
  content: 'tag';
  position: absolute;
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: italic;
  line-height: 1;
  background: rgba(255,255,255,.8);
  border: 1px solid;
  padding: 2px 4px 6px;
  border-radius: 25%;
  margin: 4px 0 0 14px;
  box-shadow: 2px 2px currentColor;
}

/* Inline elements */
del {
  text-decoration: var(--accent) .08em line-through;
}

/* Lists */
.inline {
  line-height: 1.32 !important;
}
dl.long {
  font-size: .8em;
}
dl.long dt {
  min-width: 120px !important;
}
dl.long dt, dl.long dd {
  margin: 0 !important;
}
ol.tight li {
  margin-bottom: 1em;
}

/* Forms */
label {
  font-weight: bold;
}
label:after {
  content: ": ";
}
input {
  font-family: 'Open Sans';
  font-size: 28px;
}
input[type=text] {
  border: 1px solid;
  padding: 0 .5em;
  border: 1px solid #737373;
}
input.small {
  max-width: 200px;
}
.slide form p {
  margin-bottom: 0;
}

/* Opinion symbols */
.opinion:before {
  content: " ";
  display: block;
  position: absolute;
  width: 1.3em;
  margin-left: -1.5em;
  background: url(../images/opinion.svg) no-repeat center center / contain;
}
h2.opinion:before {
  width: 1em;
  margin: .05em 0 0 -1.15em;
}
.label.opinion:before {
  margin: -1em 0 0 -1em;
}

/* Images */
figure:not(.cover) img {
  display: block;
  max-width: 100%;
  max-height: 400px;
  margin: 0 auto;
}
figcaption {
  display: block;
  font-size: 10pt;
  line-height: 1.5 !important;
  text-align: right;
}
.center {
  display: block;
  margin: 0 auto;
}
img.narrow {
  margin-left: 60px;
}
iframe.image {
  width: 100%;
  height: 420px;
}
iframe.graph {
  width: 1024px;
  height: 492px;
  margin: -30px -60px;
  overflow: hidden;
}
iframe.query-client, iframe.website {
  width: 100%;
  height: 462px;
}
.faded {
  opacity: .15;
  filter: contrast(1.1);
}
.slide figure.cover.width.margin > :first-child {
  width: 88%
}
.slide h2 + figure.cover.margin > :first-child {
  margin-top: 2em;
}
.slide h2 + figure.cover.height.margin > :first-child,
.slide ul + figure.cover.height.margin > :first-child {
  height: 75%;
}
.slide.cover h2 {
  text-shadow: -1.5px -1.5px 0 white,
                1.5px -1.5px 0 white,
               -1.5px  1.5px 0 white,
                1.5px  1.5px 0 white;
}
.dark.slide.cover h2 {
  color: var(--accent);
  box-shadow: 0 0 100px white;
  background-color: rgba(255, 255, 255, .5);
}

/* Full-slide quotes */
blockquote > p {
  font-weight: bold;
  font-style: italic;
}
.slide:not(.full) > blockquote:first-child {
  padding-top: 145px;
}
blockquote.long p {
  margin-bottom: .66em;
}
blockquote.white {
  position: absolute;
  color: white;
}
blockquote.white > * {
  filter: drop-shadow(5px 5px 2px rgba(0,0,0,.5));
}
blockquote.white::before {
  z-index: -1;
  color: var(--accent);
}

/* Overlays on images */
.shower .label {
  position: absolute;
  display: block;
  background-color: rgba(255,255,255,.8);
  border-radius: 15px;
  color: black;
  padding: 10px;
}
.shower .label * {
  color: black;
}

/* Tight slides */
.slide.tight p {
  margin-bottom: 0px;
}
.slide.tight pre {
  margin-bottom: 38px;
}

/* Full-screen navigation for touch */
.handle::before {
  display: block;
  content: " ";
  position: absolute;
  background: rgba(255, 255, 255, 0);
  width: 100%;
  height: 25%;
  left: 0;
  bottom: 10%;
}

/* Tweets */
.twitter-tweet-rendered {
  margin: 3em auto !important;
  transform: scale(1.5) !important;
}

/* Browser window */
.browser {
  background: url(../images/browser.jpg) top center / 100% no-repeat;
  height: 500px;
  border-radius: 12px;
  box-shadow:  5px  5px 10px rgba(0, 0, 0, .4),
              -2px  5px 10px rgba(0, 0, 0, .4);
}
.browser .address-bar {
  position: relative;
  top: 59px;
  left: 116px;
  font-size: 26px;
}
.browser .body {
  position: relative;
  top: 83px;
  height: 400px;
  text-align: center;
}
.browser .body * {
  margin-left: 0;
}

/* CSS examples */
#css-test {
  font-style: italic;
  text-align: center;
  border: 3px solid #453688;
}
#css-test span { border: 3px solid #D76016; }
#css-test span:last-child { background-color: #737373; }

/* Do and dont's */
.do, .dont {
  width: 48%;
  float: left;
}
.dont {
  margin-right: 4%;
}
.do h3 {
  color: #453688;
}
.dont h3 {
  color: #D76016;
}
.do *, .dont * {
  margin-left:  0 !important;
  padding-left: 0 !important;
}
.do code {
  width: auto !important;
  text-align: left;
}
.do .example, .dont .example {
  min-height: 210px;
}
.do + ul {
  margin: 0;
  bottom: 42px;
  position: absolute;
}
.do + ul li {
  margin: 0;
  font-weight: normal;
  font-style: italic;
  color: #737373;
}

/* Queries */
ol.query > li {
  min-height: 126px;
  margin-bottom: 0;
}
ol.query .count {
  float: right;
  color: #D76016;
}
ol.query em {
  color: #737373;
}
ol.query code {
  letter-spacing: -1px;
  white-space: nowrap;
}
@media print {
  nav{
    display: none;
  }
}

.slide.story .label {
  color: var(--accent);
  background: none;
  font-weight: bold;
  text-shadow:
    0 0 200px rgba(255, 255, 255, .5),
    0 0 15px white;
  left: 40px;
}
.slide.story .label.year {
  top: 64px;
  font-size: 4em;
}
.slide.story .label.item {
  top: 160px;
  font-size: 2em;
}
.slide.story .label.distance {
  top: 230px;
  font-size: 1.66em;
}