/**
 * School Theme. Based on the white Theme of reveal.js
 *
 * By Beat Temperli
 */
@import url(../../../node_modules/reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro.css);
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&family=Ubuntu:wght@500&display=swap');

section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
  color: #fff; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
:root {
  --background-color: #fff;
  --main-font: Source Sans Pro, sans-serif;
  --main-font-size: 70px;
  --main-color: #129480;
  --contra-color: #943812;
  --color-pink: #940180;
  --color-green: #2E940A;
  --block-margin: 30px;
  --heading-margin: 0 0 30px 0;
  --heading-font: "Ubuntu", Helvetica, sans-serif;
  --heading-color: #129480;
  --heading-line-height: 1.2;
  --heading-letter-spacing: normal;
  --heading-text-transform: normal;
  --heading-text-shadow: none;
  --heading-font-weight: 500;
  --heading1-text-shadow: none;
  --heading1-size: 2.5em;
  --heading2-size: 1.6em;
  --heading3-size: 1.3em;
  --heading4-size: 1em;
  --code-font: monospace;
  --code-background: #272822;
  --code-color: #ddd;
  --link-color: #129480;
  --link-color-hover: #01473D;
  --selection-background-color: #19D4B8;
  --selection-color: #fff; }

.reveal-viewport {
  background: #fff;
  background-color: #fff;
  transition: -webkit-transform 0.8s ease 0s, background 300ms linear !important;
}

.reveal {
  font-family: var(--main-font);
  font-size: var(--main-font-size);
  font-weight: normal;
  color: #222; }

.reveal ::selection {
  color: #fff;
  background: #19D4B8;
  text-shadow: none; }

.reveal ::-moz-selection {
  color: #fff;
  background: #19D4B8;
  text-shadow: none; }

.reveal .slides section,
.reveal .slides section > section {
  line-height: 1.3;
  font-weight: inherit; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 70px 0;
  color: #129480;
  font-family: "Ubuntu", Helvetica, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  word-wrap: break-word; }

.reveal h1 {
  font-size: 2.75em; }

.reveal h2 {
  font-size: 2.0em; }

.reveal h3 {
  font-size: 1.8em; }

.reveal h4 {
  font-size: 1.5em; }

.reveal h1 {
  text-shadow: none; }

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: 30px 0;
  line-height: 1.3; }

/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
  margin-bottom: 0; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95vw;
  max-height: 95vh; }

.reveal strong,
.reveal b {
  font-weight: bold; }

.reveal em,
.reveal i {
  font-style: italic; }

.reveal .slides ol,
.reveal .slides dl,
.reveal .slides ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em; }

.reveal .slides ol {
  list-style-type: none;
  counter-reset: item;
}

.reveal .slides ol li::before {
  content: counters(item, ".") ".";
  margin-right: 20px;
  counter-increment: item
}

.reveal .slides ol li::marker {
  display: none;
}

.reveal .slides ul {
  list-style-type: none;
}

.reveal .slides ul li p {
  margin: calc(var(--block-margin) / 2) 0;
}

.reveal .slides ul li::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: var(--main-color);
  position: absolute;
  margin-left: -45px;
  margin-top: 35px;
}

.reveal .small ul li::before {
  width: 10px;
  height: 10px;
  margin-top: 17px;
  margin-left: -30px;
}

.reveal .slides ul ul {
  list-style-type: none;
  font-size: 80%;
}

.reveal .slides ul ul li:before {
  margin-top: 27px;
  width: 13px;
  height: 13px;
}

.reveal .slides ul ul ul {
  list-style-type: none;
  font-size: 70%;
}

.reveal .slides ul ul ul li:before {
  margin-top: 20px;
  width: 11px;
  height: 11px;
}

.reveal .slides ul ul,
.reveal .slides ul ol,
.reveal .slides ol ol,
.reveal .slides ol ul {
  display: block;
  margin-left: calc(var(--block-margin) * 2)
}

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: var(--block-margin) auto;
  padding: var(--block-margin);
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 10px rgba(7, 58, 50, 1); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q,
.italic {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  text-align: left;
  font-size: 0.7em;
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

.reveal code {
  font-family: monospace;
  text-transform: none; }

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 600px;
  word-wrap: normal; }

.reveal pre code.-big {
  max-height: 80vh;
}

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.75em;
}

.reveal table + table {
  margin-top: calc(var(--block-margin) * 2);
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 2px solid; }

.reveal table th {
  font-weight: bold;
  color: var(--main-color);
  border-bottom: 4px solid var(--main-color);
}

.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 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; }

.reveal img {
  margin: 20px 0; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #129480;
  text-decoration: none;
  transition: color .15s ease; }

.reveal a:hover {
  color: #01473D;
  text-shadow: none;
  border: none; }

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

/*********************************************
 * Frame helper
 *********************************************/
.reveal .r-frame {
  border: 4px solid #222;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.reveal a .r-frame {
  transition: all .15s linear; }

.reveal a:hover .r-frame {
  border-color: #129480;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

.-contain .slide-background-content {
  background-size: contain;
}
/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls {
  color: #129480;
  font-size: 8px;
}

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

/*********************************************
 * ADD-ONS
 *********************************************/
.logo {
  position: fixed;
  bottom: 0;
  left: 0;
  background-image: url("/assets/images/logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 150px;
  height: 40px;
  margin: 20px;
}

.point {
  position: fixed;
  top: 0;
  right: 0;
  margin: 20px;
  height: 20px;
  width: 20px;
  background: #129480;
}

.point::before,
.point::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  margin: 20px;
  height: 20px;
  width: 20px;
  background: #129480;
}

.point::before {
  margin-right: 60px;
}

.point::after {
  margin-top: 60px;
}

.code {
  position: absolute;
  display: block;
  z-index: 999;
  padding: 50px;
  font-size: 14px;
  text-align: left;
  background: var(--main-color);
  color: var(--background-color);
  white-space: pre;
  cursor: pointer;
}

.code.hidden {
  display: none;
  position: relative;
  z-index: -999;
}

h1.todo,
h2.todo,
h3.todo,
h4.todo,
h5.todo,
h6.todo,
a.todo {
  color: var(--background-color);
}

/*********************************************
 * Helper
 *********************************************/

hr {
  border-top: 4px solid var(--main-color);
  max-width: 90vw;
}

.primary {
  color: var(--main-color);
}

.secondary,
h2.secondary {
  color:var(--color-pink);
}

.danger,
h2.danger {
  color: var(--contra-color);
}

.opacity-05 {
  opacity: 0.5;
}

.small {
  font-size: 35px;
}

.float-left {
  float: left;
  margin: 0 5vw;
}

.hidden {
  display: none;
}

.no-float {
  display: flex;
  flex-direction: column;
}

.todo {
  display: inline-block;
  border: 1px solid;
  padding: 10px 40px;
  background: var(--main-color);
  color: var(--background-color);
}

.todo.-danger {
  background: var(--contra-color);
}

.todo.-nopadding {
  border: none;
  padding: 0;
}

.no-float * {
  margin-bottom: var(--block-margin);
}

.margin-top,
.reveal p.margin-top,
.reveal p b.margin-top {
  margin-top: calc(var(--block-margin) * 4);
}

.margin-bottom,
.reveal p.margin-bottom,
.reveal p b.margin-bottom {
  margin-bottom: calc(var(--block-margin) * 4);
}

.margin-right {
  margin-right: calc(var(--block-margin) * 4);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.text-left {
  text-align: left;
}

.reveal p b.margin-top {
  display: block;
}

.box {
  display: flex;
}

.box p {
  display: inline-block;
  margin: auto;
}

.box.-left {
  text-align: left;
  width: 60vw;
  margin: auto;
}

.box.-left p {
  margin: auto auto auto 0;
}

.box.-column {
  flex-direction: column;
}

.box.-row div {
  flex-grow: 1;
}

/*********************************************
 * SVG
 *********************************************/
.svg-image img,
.svg-image p {
  margin: 0;
}

.svg-image img {
  position: absolute;
  transform: translateX(-50%);
}

.svg-image.-small img {
  height: 10vh;
  width: auto;
}

img.border {
  border: 2px solid var(--main-color);
}

svg.fill-primary * {
  fill: var(--main-color);
}

.img-wrapper {
  display: flex;
  justify-content: center;
}

.img-wrapper img {
  display: block;
}

.img-wrapper.-equalheight img {
  height: 550px;
}

.img-wrapper.-margin img {
  margin-left: 20px;
  margin-right: 20px;
}

/*********************************************
 * PLUGINS
 *********************************************/
tagcloud span {
  padding-left: 20px;
  padding-right: 20px;
}

tagcloud[small] {
  font-size: 40px;
}

tagcloud[smaller] {
  font-size: 32px;
}

tagcloud.tagcloud-bg {
  line-height: 1.75;
}

tagcloud.tagcloud-bg .clouditem {
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
  background-color: var(--code-background);
  color: var(--code-color) !important;
  margin: 20px;
}

ul li .MathJax_Display {
  text-align: left !important;
  margin: 10px 0;
}

/*********************************************
 * PRINT BACKGROUND
 *********************************************/
@media print {
  .backgrounds {
    background-color: #fff;
  }

  .point {
    display: none;
  }
}


