theme.css

@import url(./fonts/inter/inter.css);
@import url(./fonts/fira_code/fira_code.css);
@import url(./fonts/devicon/devicon-base.css);
@import url(./fonts/devicon/devicon.min.css);

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: #0D2831;
  --r-main-font: Inter, Helvetica, sans-serif;
  --r-main-font-size: 42px;
  --r-main-font-weight: 100;
  --r-main-color: #fff;
  --r-block-margin: 50px;
  --r-heading-margin: 0 0 20px 0;
  --r-heading-font: Inter, Helvetica, sans-serif;
  --r-heading-color: #D32129;
  --r-heading-line-height: 1.2;
  --r-heading-letter-spacing: normal;
  --r-heading-text-transform: uppercase;
  --r-heading-text-shadow: none;
  --r-heading-font-weight: 200;
  --r-heading1-text-shadow: none;
  --r-heading1-size: 2.5em;
  --r-heading2-size: 1.6em;
  --r-heading3-size: 1.3em;
  --r-heading4-size: 1em;
  --r-code-font: 'Fira Code', monospace;
  --r-code-font-size: 0.90em;
  --r-code-font-weight: 100;
  --r-link-color: #3d92aa;
  --r-link-color-dark: #2e6f81;
  --r-link-color-hover: #4EB9DE;
  --r-selection-background-color: rgba(66, 175, 250, 0.75);
  --r-selection-color: #fff;
}

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

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

.reveal ::selection {
  color: var(--r-selection-color);
  background: var(--r-selection-background-color);
  text-shadow: none;
}

.reveal ::-moz-selection {
  color: var(--r-selection-color);
  background: var(--r-selection-background-color);
  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: var(--r-heading-margin);
  color: var(--r-heading-color);
  font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight);
  line-height: var(--r-heading-line-height);
  letter-spacing: var(--r-heading-letter-spacing);
  text-transform: var(--r-heading-text-transform);
  text-shadow: var(--r-heading-text-shadow);
  word-wrap: break-word;
}

.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 p {
  margin: var(--r-block-margin) 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: 95%;
  max-height: 95%;
}

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

.reveal em {
  font-style: italic;
}

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

.reveal ol {
  list-style-type: decimal;
}

.reveal ul {
  list-style-type: disc;
}

.reveal ul ul {
  list-style-type: square;
}

.reveal ul ul ul {
  list-style-type: circle;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px;
}

.reveal dt {
  font-weight: bold;
}

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

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: var(--r-block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

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

.reveal q {
  font-style: italic;
}

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

.reveal code {
  font-family: var(--r-code-font);
  text-transform: none;
  tab-size: 2;
}

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

.reveal .code-wrapper {
  white-space: normal;
}

.reveal .code-wrapper code {
  white-space: pre;
}

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

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

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  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 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: var(--r-block-margin) 0;
}

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: var(--r-link-color);
  text-decoration: none;
  text-shadow: none;
  transition: color 0.15s ease;
}

.reveal a:hover {
  color: var(--r-link-color-hover);
  text-shadow: none;
  border: none;
}

.reveal .roll span:after {
  color: #fff;
  background: var(--r-link-color-dark);
}

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

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

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

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls {
  color: var(--r-link-color);
}

/*********************************************
 * 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);
  }
}

.authors li.author {
  display: inline;
}

.authors li.author::after {
  content: ", ";
}

.authors li.author:last-child::after {
  content: "";
}

.subtitle {
  font-size: 2em;
}


/* Images */
section.img_left img,
section.img_left figure {
  float: left;
  margin-right: 40px;
}

section.img_left img {
  box-shadow: -5px 5px 10px 2px gray;
}

section.img_left blockquote {
  z-index: -1;
}

section.img_left blockquote p {
  display: inline !important;
  text-align: right;
}

section.img_left ul,
section.img_left ol {
  display: inline !important;
  list-style-position: inside;
  list-style: none;
  counter-reset: imgleft;
}

section.img_left ul li,
section.img_left ol li {
  text-indent: -20px;
  margin-left: 50px;
}

section.img_left ul li::before {
  content: counter(imgleft, disc);
  padding-right: 7px;
  margin-left: -11px;
}

section.img_left ol li::before {
  counter-increment: imgleft;
  content: counter(imgleft, decimal) ". ";
  padding-right: 5px;
  margin-left: -11px;
}

section.img_right img,
section.img_right figure {
  float: right;
  margin-left: 20px;
}

section.img_right img {
  box-shadow: 5px 5px 10px 2px gray;
}

section.img_right blockquote {
  z-index: -1;
}

section.img_right blockquote p {
  display: inline !important;
}

section.img_right ul,
section.img_right ol {
  display: inline !important;
  list-style-position: inside;
  list-style: none;
  counter-reset: imgright;
}

section.img_right ul li,
section.img_right ol li {
  text-indent: -20px;
  margin-left: 50px;
}

section.img_right ul li::before {
  content: counter(imgright, disc);
  padding-right: 10px;
  margin-left: -11px;
}

section.img_right ol li::before {
  counter-increment: imgright;
  content: counter(imgright, decimal) ". ";
  padding-right: 5px;
  margin-left: -11px;
}

.reveal figcaption {
  font-size: 75%;
  text-shadow: none;
}

img.portrait {
  border-radius: 50%;
  width: 200px;
  height: auto;
}

img.portrait+figcaption {
  font-size: var(--r-heading3-size);
  margin-bottom: 1em;
}

img.ledger {
  width: 200px;
  height: auto;
}

img.logo {
  width: 256px;
  height: auto;
  vertical-align: middle;
}

img.qrcode {
  width: 512px;
  height: auto;
  vertical-align: middle;
}

.fragment.blur {
  filter: blur(5px);
}

.fragment.blur.visible {
  filter: none;
}

.fragment.initial {
  filter: none;
}

.fragment.blur.visible {
  filter: none;
}

.compilation-error {
  text-decoration: line-through
}

.circle {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

.circle.hidden {
  /* width: 0px;
  height: 0px; */
  visibility: hidden;
}

.highlight {
  font-size: 400%;
  /* color: var(--r-heading-color); */
}

.faded {
  font-size: 50%;
  opacity: 0.5;
}
.details {
  font-size: 100%;
}

/* highlightjs theme */
/* Tomorrow Night Theme */
/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
.tomorrow-comment,
pre .comment,
pre .title {
  color: #969896;
}

.tomorrow-red,
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #cc6666;
}

.tomorrow-orange,
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #de935f;
}

.tomorrow-yellow,
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #f0c674;
}

.tomorrow-green,
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #b5bd68;
}

.tomorrow-aqua,
pre .css .hexcolor {
  color: #8abeb7;
}

.tomorrow-blue,
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #81a2be;
}

.tomorrow-purple,
pre .keyword,
pre .javascript .function {
  color: #b294bb;
}

pre code {
  display: block;
  background: #1d1f21;
  color: #c5c8c6;
  font-family: Menlo, Monaco, Consolas, monospace;
  line-height: 1.5;
  border: 1px solid #ccc;
  padding: 10px;
}