@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* Fonts! Sizes! And a bit of color. */
.remark-slide-content {
  font-family: 'Droid Serif';
  font-size: 25px !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Droid Serif';
  font-weight: bold;
  font-size: 45px !important;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
}

code {
  font-family: 'Inconsolata';
  font-size: 110%;
  background-color: var(--code-bg);
}
code.remark-code {
  font-size: 100%;
}
.lab ul li code.remark-code.hljs.bash {
  padding: 0;
}

/* For print! Borrowed from https://github.com/gnab/remark/issues/50 */
@page {
  size: 1210px 681px;
  margin: 0;
 }

@media print {
  .remark-slide-scaler {
      width: 100% !important;
      height: 100% !important;
      transform: scale(1) !important;
      top: 0 !important;
      left: 0 !important;
  }
}

/* Don't change things below this unless you know what you're doing! */

/* put slide numbers in top-right corner instead of bottom-right */
div.remark-slide-number {
  top: 6px;
  left: unset;
  bottom: unset;
  right: 6px;
}

/* Step counter under the slide number, on slides with "--" steps
   (added by workshop.html). Bold and colored on the last step. */
.remark-step-number {
  position: absolute;
  top: 34px;
  right: 6px;
  font-size: 25px;
  opacity: 0.5;
}
.remark-step-number.last {
  font-weight: bold;
  color: var(--accent);
  opacity: 1;
}

/* "?" help button in the bottom-right corner (added by workshop.html). */
.remark-help-button {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 2px solid #999;
  border-radius: 50%;
  background: white;
  color: #666;
  font: bold 22px/1 sans-serif;
  cursor: pointer;
  opacity: 0.6;
}
.remark-help-button:hover {
  opacity: 1;
  color: black;
  border-color: black;
}
@media print {
  .remark-help-button { display: none; }
}

/* Help screen ("?"): black text on white, instead of white on dark gray. */
.remark-help-mode .remark-backdrop {
  background: white;
  opacity: 0.97 !important;
}
.remark-help .remark-help-content,
.remark-help .remark-help-content td {
  color: black;
}
.remark-help .remark-help-content table {
  border-collapse: collapse;
}
/* The global "td" rule above gives cells a gray background; use white. */
.remark-help td {
  background: white;
  color: black;
  border-bottom: 1px solid #ddd;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Remark sets only "top" on the "Esc: back to slideshow" line, so it sat
   unstyled in the top-left corner. Keep it at the top, on the right. */
.remark-help .dismiss {
  position: absolute;
  top: 5% !important;
  right: 5%;
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 12pt;
}
.remark-help .remark-help-content .key {
  background: #f3f3f3;
  color: black;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 #aaa;
}

.debug {
  font-family: monospace;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: white;
  background-color: black;
  opacity: 0;
}
.debug a {
  color: white;
}
.debug:hover {
  opacity: 1;
}
/* Dev mode (SLIDES_DEV=1): always show the footer, small and on the left,
   so it does not cover the slide number. */
.dev .debug {
  opacity: 0.7;
  right: auto;
  padding: 0 0.5em;
  font-size: 0.6em;
}

a {
  text-decoration: none;
  color: var(--link);
}

.remark-slide-content { padding: 1em 2.5em 1em 2.5em; }

.footnote {
  position: absolute;
  bottom: 1em;
}
span.footnote {
  bottom: 2em;
}

.red { color: var(--red); }
.gray { color: var(--muted); }
.small { font-size: 70%; }
.big { font-size: 140%; }
.underline { text-decoration: underline; }
.strike { text-decoration: line-through; }

/*
The pic class is tricky.

It is used to display full screen pictures (for isntance, diagrams).
We want the picture to take as much space as possible on the slide.

But we have two problems here:
- some pictures are taller than wide, others are wider than tall;
- some pictures are displayed by themselves, others with a title.

This makes it particularly difficult to resize the pictures. If we
set an absolute width or height, it won't work for both taller and
wider pictures. If we set an absolute height, it won't work with
both pics-with-title and pics-by-themselves.

Perhaps it would be a good idea to replace the pic class with two
different classes, like pic-with-title and pic-by-itself; but in
the meantime, we'll check if the <img> tag is within the first <p>
in the slide to try and guess if the pic is by itself, or with
a title. It won't be 100% bulletproof but it should work for
our slides.

The pixel dimensions in the classes below correspond to the base
scaler dimensions of remark (see scaler.js in remark source code).
*/
div.pic {
  padding: 0;
  vertical-align: middle;
}
div.pic p {
  margin: 0;
}
div.pic img {
  display: block;
  margin: auto;
  max-width: 1210px;
  max-height: 550px;
}
/* "1 of :not(...)" skips the dev-mode footer paragraph (.debug), which
   markmaker.py puts at the top of each slide. */
div.pic p:nth-child(1 of :not(p:has(> .debug:only-child))) img {
  max-width: 1210px;
  max-height: 681px;
}
div.pic h1, div.pic h2, div.title h1, div.title h2 {
  text-align: center;
}

/* Center images that are on title slides */
div.title img {
  display: block;
  margin: auto;
  max-width: 1210px;
  max-height: 420px; /* Arbitrary value to have some space for the title */
}
div.title {
  vertical-align: middle; 
}
div.title > p:nth-child(1 of :not(p:has(> .debug:only-child))) {
  text-align: center;
  font-size: 300%;
}

div.pic span.interstitial img {
  width: 100%;
  max-height: unset;
  max-width: unset;
}

/* "Normal" images (not on title or pic slides) shouldn't be too big */
div img {
  max-width: 1210px;
  max-height: 250px;
}

.nav {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  font-size: 150%;
}

.blackbelt {
  background-image: url("images/blackbelt.png");
  background-size: 1.5em;
  background-repeat: no-repeat;
  padding-left: 2em;
  background-position: left;
}
.warning {
  background-image: url("images/warning.png");
  background-size: 1.5em;
  padding-left: 2em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-repeat: no-repeat;
  background-position: left;
}
.lab {
  background-color: var(--box-bg);
  background-image: url("images/keyboard.png");
  background-size: 1.4em;
  background-repeat: no-repeat;
  background-position: 0.2em 0.2em;
  border: 2px dotted var(--box-border);
}
.lab:before {
  content: ">";
  margin-left: 1.8em;
  margin-top: 0.25em;
  display: block;
}

li p { line-height: 1.25em; }

div.extra-details {
  background-image: url("images/extra-details.png");
  background-position: 0.5% 1%;
  background-size: 4%;
}

/* This is used only for the history slide (the only table in this doc) */
td {
  padding: 0.1em 0.5em;
  background: var(--box-bg);
}

/* Use this to layout a slide in two columns */
.column-half {
  float: left;
  width: 50%;
}

.hide {
  display: none;
}

/* Single-slide TOC (manifest option "toc: single"). */
.toc-single {
  column-count: 3;
  column-gap: 1em;
  font-size: 52%;
  line-height: 1.15;
}
.toc-single p { margin: 0.5em 0 0.1em; break-after: avoid; }
.toc-single ul { margin: 0; padding-left: 1.1em; }
.toc-single li { break-inside: avoid; margin: 0; }

/*
Themes. workshop.html sets <html data-theme="..."> and the 🎨 button
cycles through them. Each theme only sets these variables; the rules
below and above use them. The default values are the original colors.
*/
:root {
  --page-bg: #d7d8d2;      /* around the slides */
  --bg: #fff;              /* slide background */
  --fg: #000;              /* body text */
  --heading: #000;
  --link: blue;
  --muted: #ccc;           /* .gray */
  --red: #fa0000;          /* .red */
  --accent: #0a7d2c;       /* last-step counter */
  --code-bg: #ccc;         /* inline code */
  --pre-bg: #f0f0f0;       /* code blocks */
  --pre-fg: #444;
  --box-bg: #eee;          /* .lab boxes, table cells */
  --box-border: black;
  --line-hl: rgba(255, 255, 0, 0.5);  /* highlighted code */
  --hl-comment: #888888;
  --hl-string: #880000;
  --hl-title: #880000;
  --hl-variable: #bc6060;
  --hl-builtin: #397300;
  --hl-literal: #78a960;
  --hl-meta: #1f7199;
}
:root[data-theme="solarized-light"] {
  --page-bg: #eee8d5; --bg: #fdf6e3; --fg: #586e75; --heading: #073642;
  --link: #268bd2; --muted: #93a1a1; --red: #dc322f; --accent: #859900;
  --code-bg: #eee8d5; --pre-bg: #eee8d5; --pre-fg: #586e75;
  --box-bg: #eee8d5; --box-border: #93a1a1; --line-hl: rgba(181, 137, 0, 0.25);
  --hl-comment: #93a1a1; --hl-string: #2aa198; --hl-title: #268bd2;
  --hl-variable: #b58900; --hl-builtin: #859900; --hl-literal: #d33682;
  --hl-meta: #cb4b16;
}
:root[data-theme="catppuccin-latte"] {
  --page-bg: #dce0e8; --bg: #eff1f5; --fg: #4c4f69; --heading: #4c4f69;
  --link: #1e66f5; --muted: #9ca0b0; --red: #d20f39; --accent: #40a02b;
  --code-bg: #ccd0da; --pre-bg: #e6e9ef; --pre-fg: #4c4f69;
  --box-bg: #e6e9ef; --box-border: #9ca0b0; --line-hl: rgba(223, 142, 29, 0.25);
  --hl-comment: #8c8fa1; --hl-string: #40a02b; --hl-title: #1e66f5;
  --hl-variable: #fe640b; --hl-builtin: #8839ef; --hl-literal: #179299;
  --hl-meta: #ea76cb;
}
:root[data-theme="nord"] {
  --page-bg: #242933; --bg: #2e3440; --fg: #d8dee9; --heading: #eceff4;
  --link: #88c0d0; --muted: #4c566a; --red: #bf616a; --accent: #a3be8c;
  --code-bg: #434c5e; --pre-bg: #3b4252; --pre-fg: #d8dee9;
  --box-bg: #3b4252; --box-border: #4c566a; --line-hl: rgba(235, 203, 139, 0.25);
  --hl-comment: #7b88a1; --hl-string: #a3be8c; --hl-title: #88c0d0;
  --hl-variable: #d08770; --hl-builtin: #81a1c1; --hl-literal: #b48ead;
  --hl-meta: #8fbcbb;
}
:root[data-theme="catppuccin-mocha"] {
  --page-bg: #11111b; --bg: #1e1e2e; --fg: #cdd6f4; --heading: #cdd6f4;
  --link: #89b4fa; --muted: #6c7086; --red: #f38ba8; --accent: #a6e3a1;
  --code-bg: #313244; --pre-bg: #181825; --pre-fg: #cdd6f4;
  --box-bg: #181825; --box-border: #45475a; --line-hl: rgba(249, 226, 175, 0.2);
  --hl-comment: #7f849c; --hl-string: #a6e3a1; --hl-title: #89b4fa;
  --hl-variable: #fab387; --hl-builtin: #cba6f7; --hl-literal: #94e2d5;
  --hl-meta: #f5c2e7;
}
:root[data-theme="github-dark"] {
  --page-bg: #010409; --bg: #0d1117; --fg: #c9d1d9; --heading: #f0f6fc;
  --link: #58a6ff; --muted: #484f58; --red: #ff7b72; --accent: #3fb950;
  --code-bg: #262c36; --pre-bg: #161b22; --pre-fg: #c9d1d9;
  --box-bg: #161b22; --box-border: #30363d; --line-hl: rgba(187, 128, 9, 0.3);
  --hl-comment: #8b949e; --hl-string: #a5d6ff; --hl-title: #d2a8ff;
  --hl-variable: #ffa657; --hl-builtin: #ff7b72; --hl-literal: #79c0ff;
  --hl-meta: #7ee787;
}

/* Apply the variables to Remark's own styles. The "html" prefix makes
   these rules win over the styles that Remark adds after this file. */
html .remark-container { background: var(--page-bg); }
html .remark-slide-content { background-color: var(--bg); color: var(--fg); }
html .remark-slide-content h1, html .remark-slide-content h2,
html .remark-slide-content h3, html .remark-slide-content h4 { color: var(--heading); }
html .hljs-default .hljs { background: var(--pre-bg); }
html .hljs-default .hljs, html .hljs-default .hljs-subst { color: var(--pre-fg); }
html .hljs-default .hljs-comment { color: var(--hl-comment); }
html .hljs-default .hljs-type, html .hljs-default .hljs-string,
html .hljs-default .hljs-number, html .hljs-default .hljs-quote,
html .hljs-default .hljs-deletion { color: var(--hl-string); }
html .hljs-default .hljs-title, html .hljs-default .hljs-section { color: var(--hl-title); }
html .hljs-default .hljs-regexp, html .hljs-default .hljs-symbol,
html .hljs-default .hljs-variable, html .hljs-default .hljs-template-variable,
html .hljs-default .hljs-link { color: var(--hl-variable); }
html .hljs-default .hljs-literal { color: var(--hl-literal); }
html .hljs-default .hljs-built_in, html .hljs-default .hljs-bullet,
html .hljs-default .hljs-code, html .hljs-default .hljs-addition { color: var(--hl-builtin); }
html .hljs-default .hljs-meta { color: var(--hl-meta); }
html .remark-code-line-highlighted,
html .remark-code-span-highlighted { background-color: var(--line-hl); }

/* 🎨 theme button, left of the "?" help button (added by workshop.html). */
.remark-theme-button {
  position: absolute;
  bottom: 8px;
  right: 52px;
  width: 36px;
  height: 36px;
  border: 2px solid #999;
  border-radius: 50%;
  background: white;
  font: 20px/1 sans-serif;
  cursor: pointer;
  opacity: 0.6;
}
.remark-theme-button:hover { opacity: 1; border-color: black; }
@media print {
  .remark-theme-button { display: none; }
}

/* Theme name, shown in the bottom center for a moment after a change. */
.theme-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4em 1em;
  border-radius: 0.5em;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font: 20px sans-serif;
  pointer-events: none;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.4s;
}
.theme-toast.visible { opacity: 1; transition: none; }