/**
 * @file
 * Presentation-specific styles.
 */

img {
  display: block;
}

.fa-drupal {
  color: #0678be;
}
.fa-twitter {
  color: #1da1f2;
}
.fa-strava {
  color: #fc4c02;
}

.reveal a {
  color: inherit;
}

.reveal ul,
.reveal ol {
  font-size: 1.5rem;
  align-self: center;
  justify-self: center;
}
@media (min-width: 1280px) {
  .reveal ul,
  .reveal ol {
    width: calc(80% - 1em);
  }
}

.reveal pre code {
  background-color: #f8f8f8;
  border: 1ex solid #f8f8f8;
  font-size: 125%;
  line-height: 1.1em;
}

.header .twitter {
  margin-left: auto;
  opacity: 0.5;
}
.header .twitter .fa-twitter {
  color: inherit;
}

.reveal .slides section.title {
  padding: 0;
}
.reveal .slides section.title .content {
  grid-template-columns: auto;
  grid-template-areas: "title" "description";
}
.slides .title .presentation-url {
  grid-area: header;
  text-align: right;
  font-size: 0.8em;
  align-self: center;
  opacity: 0.5;
}

@media (max-width: 480px) {
  #title .presentation-url {
    display: none;
  }
}

section.screenshot.full .grid-wrapper {
  padding: 0;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "content";
}
/** Additional elements are overlaid on top of the image. **/
.screenshot.full .grid-wrapper > * {
  grid-area: content;
}
.screenshot img,
.screenshot video,
.screenshot figure {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.screenshot.cover img,
.screenshot.cover video {
  object-fit: cover;
}
figure.meme {
  font-family: Impact, "Poppins", "Source Sans Pro", Helvetica, sans-serif;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "content";
}
figure.meme > * {
 grid-area: content;
}
figure.meme h1 {
  grid-area: content;
  align-self: end;
  justify-self: center;
  color: #fff;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 2px #333;
}
@media (max-width: 666px) {
  figure.meme h1 {
    -webkit-text-stroke: 1px #333;
  }
}

figure.code figcaption {
  color: #eeedef;
}

.references ul {
  width: 100%;
}

#end .content {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 150%;
  height: 100%;
}
#end .content > div {
  margin: auto;
}
#end .content > div > div {
  margin: 2em 0;
}
#end .content a {
  margin-top: auto;
  justify-self: end;
  display: block;
  margin-top: auto;
}