/**
 * Decker theme for reveal.js.
 *
 * Based on the white scheme by Hakim El Hattab, http://hakim.se
 */
@import url("../vendor/fontawesome/css/all.css");
@import url("../fonts/roboto.css");
@import url("../fonts/source-code-pro.css");
@import "fonts";
@import "helper";
@import "boxes";
@import "code";
@import "quizzes";
@import "titlepage";
// @import "print"; Fucks up printing

.reveal {
  @import "new-media";
  @import "columns";
}

// Global styles
body {
  background: #fff;
  background-color: #fff;
}

.reveal {
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: var(--font-size-medium);
  font-weight: normal;
  color: rgba(0, 0, 0, 1);
}

::selection,
::-moz-selection {
  color: #fff;
  background: #98bdef;
  text-shadow: none;
}

.reveal .slides section,
.reveal .slides section > section {
  line-height: 1.3;
  font-weight: inherit;
  text-align: var(--align-global);
}

.reveal {
  @each $position in center, right {
    section[data-align="#{$position}"] > h1,
    div[data-align="#{$position}"] {
      text-align: $position;
    }
  }
}

.reveal {
  .smallcaps {
    font-variant: small-caps;
  }

  .line-block {
    white-space: pre-line;
  }

  .references {
    height: 17.5em;
    overflow-y: scroll;

    div {
      margin-bottom: var(--margin-bottom-references);
    }
  }
}

.reveal {
  q,
  blockquote {
    // quotes: auto; -> don't overwrite here, is a reveal option set by yaml
    font-style: italic;
  }

  blockquote {
    display: block;
    position: relative;
    width: 70%;
    margin-bottom: var(--margin-bottom-blockquote);
    padding: space(0.25);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);

    p {
      &:first-child,
      &:last-child {
        display: inline-block;
      }
    }
  }
}

dt {
  font-weight: bold;
}

dd {
  margin-left: space(1);
}

.reveal table {
  display: inline-block;
  margin-bottom: var(--margin-bottom-table); // auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.reveal table th {
  font-weight: bold;
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: space(0.2 0.5);
  border-bottom: 1px solid;
}

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center;
}

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none;
}

.reveal table .slide-number {
  color: #009;
  background-color: rgba(255, 255, 255, 0);
}

.reveal sup {
  vertical-align: super;
  font-size: smaller;
}

.reveal sub {
  vertical-align: sub;
  font-size: smaller;
}

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top;
}

.reveal small * {
  vertical-align: top;
}

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #009;
  text-decoration: none;
  @include prefix(transition, color 0.15s ease);
}

.reveal a img {
  @include prefix(transition, color 0.15s linear);
}

.reveal a:hover {
  color: #6ca0e8;
  text-shadow: none;
  border: none;
}

.reveal a:hover img {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  box-shadow: none;
}

.reveal .roll span:after {
  color: #fff;
  background: #1a53a1;
}

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal {
  .controls {
    button {
      opacity: 0;
    }

    .enabled:active {
      margin-top: 0;
    }

    :focus {
      outline: none;
    }

    .slide-number {
      color: #009;
      background-color: rgba(255, 255, 255, 0);
    }
  }
}

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
  color: #2a76dd;
}

.reveal .progress span {
  background: #777;
  @include prefix(
    transition,
    width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985)
  );
}

/////////////////////////////////////////////
// Speaker notes, not yet tested and optimized
// for new layout engine
/////////////////////////////////////////////
.reveal {
  .speaker-notes {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #fff;
      font-weight: bold;
      margin-bottom: space(0.2);
    }

    h1 {
      text-decoration: underline;
      margin-bottom: space(0.4);
    }
  }
}

/////////////////////////////////////////////
// Slide numbers
/////////////////////////////////////////////
.reveal {
  .slide-number {
    background: transparent;
    color: gray;
    font-size: 0.4em;
    position: fixed;
    right: 50%;
    bottom: 2vmin;
  }
}

/////////////////////////////////////////////
// Pause Overlay
/////////////////////////////////////////////
.reveal {
  .resume-button {
    visibility: hidden;
  }
}

/////////////////////////////////////////////
// Text selection
/////////////////////////////////////////////
.reveal {
  ::selection {
    color: white;
    background: rgba(0, 0, 0, 0.85);
    text-shadow: none;
  }
}

/*********************************************
 * Alignment, beware of semantics as borrowed
 * from CSS 
 *********************************************/

.reveal .float-left {
  float: left;
}

.reveal .float-right {
  float: right;
}

.reveal .vertical-align-top,
.reveal .align-top {
  vertical-align: top;
}

.reveal .vertical-align-middle,
.reveal .align-middle {
  vertical-align: middle;
}

.reveal .vertical-align-bottom,
.reveal .align-bottom {
  vertical-align: bottom;
}

.reveal .align-left,
.reveal section.align-left {
  text-align: left;
}

.reveal .align-center,
.reveal section.align-center {
  text-align: center;
}

.reveal .align-right,
.reveal section.align-right {
  text-align: right;
}

/////////////////////////////////////////////////////////
// This sets all bottom margins for elements. Please
// make sure to not change this individually somewhere else
// we want one place to allow user-specified changes
/////////////////////////////////////////////////////////

.reveal h1 {
  margin-bottom: var(--margin-bottom-h1);
}
.reveal h2 {
  margin-bottom: var(--margin-bottom-h2);
} // our block headings
.reveal div.box.columns {
  margin-bottom: var(--margin-bottom-h2-block);
} // our blocks
.reveal h3 {
  margin-bottom: var(--margin-bottom-h3);
} // We don't use now, for later
.reveal p {
  margin-bottom: var(--margin-bottom-p);
}
.reveal ol {
  margin-bottom: var(--margin-bottom-ol);
}
.reveal ul {
  margin-bottom: var(--margin-bottom-ul);
}
.reveal dl {
  margin-bottom: var(--margin-bottom-dl);
}
.reveal figure {
  margin-bottom: var(--margin-bottom-figure);
}
.reveal img {
  margin-bottom: var(--margin-bottom-img);
}
.reveal table {
  margin-bottom: var(--margin-bottom-table);
}
.reveal .columns {
  margin-bottom: var(--margin-bottom-columns);
}
// Except an empty p which sometimes is inserted by the
// transformation process, that should be ignored completely

.reveal p:empty {
  display: none;
}

/*********************************************
 * MARIO: fullscreen for iframes
 *********************************************/

 .reveal div.fs-container { 
  margin:   auto;
  border:   0px;
  padding:  0px;
  position: relative;
}

.reveal div.fs-container:fullscreen {
  overflow-x:       hidden;
  overflow-y:       auto;
  background-color: white;
  padding:          20px;
}

/* needed for mobile Safari */
*:-webkit-full-screen {
  width:  100% !important;
  height: 100% !important;
}

.reveal div.fs-container>iframe {
  box-sizing: border-box;
}

.reveal div.fs-container:fullscreen>iframe {
  border: none;
}

.reveal button.fs-button { 
  z-index:          100;
  display:          inline-block;
  position:         absolute;
  top:              2px;
  right:            2px;
  cursor:           pointer;
  outline:          none;
  font-size:        20px;
  width:            24px;
  height:           24px;
  padding:          2px;
  border:           none;
  border-radius:    4px;
  opacity:          0.5;
  color:            var(--whiteboard-inactive-color);
  background-color: rgba(255,255,255,0.5);
}

.reveal button.fs-button:hover { 
  opacity:          1.0;
  color:            var(--whiteboard-active-color);
  background-color: rgba(255,255,255,0.8);
}

/*********************************************
 * MARIO: menu icon in top left corner
 *********************************************/

 .reveal .slide-menu-button {
  position:   fixed;
  left:       calc(var(--whiteboard-icon-size) * 0.25);
  top:        calc(var(--whiteboard-icon-size) * 0.25);
  bottom:     auto;
  right:      auto;
  padding:    0;
  margin:     auto;
  z-index:    40;
  background: none;
  font-size:  var(--whiteboard-icon-size);
  padding:    calc(var(--whiteboard-icon-size) * 0.5);
  opacity:    0.5;
  color:      var(--whiteboard-inactive-color);
}

.reveal .slide-menu-button:hover {
  opacity: 1.0;
  color: var(--whiteboard-active-color);
}