/**
 * Black theme for reveal.js.
 *
 * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
 */

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


/*********************************************
  * GLOBAL STYLES
  *********************************************/

 :root {
 --r-background-color: #191919;
 --r-main-font: sans-serif;
 --r-main-font-size: 2.5rem;
 --r-main-color: #eee;
 --r-main-line-height: 1.3;
 --r-block-margin: 1.25rem;
 --r-heading-margin: 0 0 1.25rem 0;
 --r-heading-font: Impact, sans-serif;
 --r-heading-color: #eee;
 --r-heading-line-height: 1.2;
 --r-heading-letter-spacing: -0.03em;
 --r-heading-text-transform: none;
 --r-heading-text-shadow: none;
 --r-heading-font-weight: normal;
 --r-heading1-text-shadow: none;
 --r-heading1-size: 2rem;
 --r-heading2-size: 1.5rem;
 --r-heading3-size: 1rem;
 --r-heading4-size: 0.8rem;
 --r-code-font: monospace;
 --r-link-color: #e7ad52;
 --r-link-color-dark: #d08a1d;
 --r-link-color-hover: #f3d7ac;
 --r-selection-background-color: #e7ad52;
 --r-selection-color: #fff;
}

[data-bs-theme=light] {
 --r-background-color: #bebebe;
 --r-main-color: #272c31;
}

[data-bs-theme=dark] {
 --r-background-color: #191919;
 --r-main-color: #eee;
}

.reveal-viewport {
 background: #111;
 background-color: var(--r-background-color);
 background: transparent;
}

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

.reveal .slides section,
.reveal .slides section>section {
 line-height: var(--r-main-line-height);
 font-weight: inherit;
}


/*********************************************
  * HEADERS
  *********************************************/

.reveal h1 {
 font-size: var(--r-heading1-size);
}

.reveal h2 {
 font-size: var(--r-heading2-size);
}

.reveal h3 {
 font-size: var(--r-heading3-size);
}

.reveal h4 {
 font-size: var(--r-heading4-size);
}

.reveal h1 {
 text-shadow: var(--r-heading1-text-shadow);
}


/*********************************************
  * OTHER
  *********************************************/

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

.reveal .r-fit-tex {
 font-size: var(--r-main-font-size);
}

.reveal sup {
 font-size: 1.9rem;
}

@media (min-width: 576px) {
 .reveal sup {
  font-size: 1.3rem;
 }
}

.reveal .kind {
 font-size: 0.11rem;
}

.reveal .kind {
 font-size: 0.11rem;
}

.reveal .fsr-2 {
 font-size: calc(2rem + 1.5vw);
 color: yellow;
}

@media (min-width: 576px) {
 .reveal .fsr-2 {
  font-size: calc(2rem + 0.9vw);
 }
}


/*********************************************
  * NAVIGATION CONTROLS
  *********************************************/

.reveal .controls {
 /*
 display: none;
 position: absolute;
 top: auto;
 bottom: 12px;
 right: 12px;
 left: auto;
 z-index: 11;
 color: #000;
 pointer-events: none;
 font-size: 10px;
  mix-blend-mode: difference;
*/
 margin: 0;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 8.2em;
 background: rgba(0, 0, 0, 0.4);
 pointer-events: auto;
}

.reveal .controls .controls-arrow {
 width: auto;
}

.reveal .controls .navigate-left {
 display: grid;
 width: auto;
 height: 100%;
 border: 0;
 border-radius: 0;
 color: var(--amarillo-1);
 font-size: 1rem;
 opacity: 0.7;
 width: 49%;
 height: 3.6em;
 left: 0;
 text-align: left;
 mix-blend-mode: difference;
}

.reveal .controls .navigate-left .controls-arrow::before {
 text-align: left;
 left: 0;
}

.reveal .controls .navigate-right {
 display: grid;
 width: auto;
 height: 100%;
 border: 0;
 border-radius: 0;
 color: var(--amarillo-1);
 font-size: 1rem;
 opacity: 0.7;
 width: 49%;
 height: 3.6em;
 right: 0;
 text-align: right;
 mix-blend-mode: difference;
}

.reveal .controls .navigate-right .controls-arrow::before {
 text-align: right;
 right: 0;
}


/*********************************************
   * PROGRESS BAR
   *********************************************/

.reveal .progress {
 background: rgba(0, 0, 0, 0.2);
 color: var(--r-link-color);
}


/*********************************************
   * PRINT BACKGROUND
   *********************************************/

@media print {
 .backgrounds {
  background-color: var(--r-background-color);
 }
}