/* root */
:root {
  --green-color: #006984; /* c: 100 m: 0 y: 20 k: 65 */
  --blue-color: #0054a2; /* c: 100 m: 70 y: 10 k: 52 */
  --green-color--dark: #004d61;
  --blue-color--dark: #002f5b;
  --cyan-color: rgb(25, 160, 202);
  --cyan-color--light: rgb(21, 186, 247);
  --gray-color: #e6e8ea;
  --gray-color--dark: #a7a9ab;
  --brown-color: rgb(178, 112, 0);
  --red-color: #f00; /* c: 0 m: 100 y: 100 k: 0 */

  --yellow-color: #ff0;

  --letter-spacing--positive: 0;
  --letter-spacing--negative: 0.015em;

  /* theme colors */
  --emphasis-color: var(--cyan-color);
  --strong-color: var(--yellow-color);

  --a-color: var(--cyan-color);

  --h1-color: var(--blue-color--dark);
  --h2-color: var(--green-color--dark);
  --code-color-background: rgba(0, 0, 0, 0.2);
}
:root {
  font-family: "Work Sans", "Noto Emoji", sans-serif;

  --font-size: 32;
  --slide-width: 960;
  --slide-height: 700;

  font-size: min(
    4.57143vh,
    3.33333vw
  );

  font-size: min(
    calc(100vh/(var(--slide-height)/var(--font-size))),
    calc(100vw/(var(--slide-width)/var(--font-size)))
  );
  line-height: 1.5;
}
::-moz-selection {
  color: #fff;
  background: #f00;
  background: var(--red-color);
  text-shadow: none;
}
::selection {
  color: #fff;
  background: #f00;
  background: var(--red-color);
  text-shadow: none;
}
/* Basics */
body {
  margin: 0;
}
p {
  margin-top: 0;
  margin-bottom: 0.3em;
}
a {
  text-decoration: none;
  color: rgb(25, 160, 202);
  color: var(--a-color);
}
a:hover {
  color: inherit;
}
a[target="_blank"]:after {
  font-family: "Work Sans", sans-serif;
  content: " ↗";
  font-size: 75%;
}
ul {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
li {
  margin-top: 0;
  margin-bottom: 0.3em;
}
h1,
h2,
h3 {
  font-weight: 900;
  letter-spacing: 0.03em;
  margin-top: 0;
  margin-bottom: 0.45em;
  line-height: 1.1;
}
h1 {
  font-size: 1.7rem;
  color: #002f5b;
  color: var(--h1-color);
}
h2 {
  font-size: 1.3rem;
  color: #004d61;
  color: var(--h2-color);
}
h3 {
  font-size: 1.1rem;
}
h1 em,
h2 em,
h3 em {
  color: rgb(25, 160, 202);
  color: var(--emphasis-color);
  font-weight: inherit;
}
h1 strong,
h2 strong,
h3 strong {
  color: #006984;
  color: var(--green-color);
  font-weight: inherit;
}
small,
.small {
  font-size: 0.65em;
}
.tiny {
  font-size: 0.5em;
}
img,
video {
  display: block;
  height: 13rem;
  width: auto;
}
img.img--w100p,
.img--w100p img,
video.video--w100p,
.video--w100p video {
  width: 100%;
  height: auto;
}
.img--pixelate {
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: -o-pixelated;
      image-rendering: pixelated;
}
figure {
  margin: 0;
}
figcaption {
  font-size: 0.65em;
  margin-top: 0.5em;
}
em {
  font-style: normal;
  color: rgb(25, 160, 202);
  color: var(--emphasis-color);
  font-weight: 700;
}
strong {
  font-style: normal;
  font-weight: inherit;
  font-weight: 700;
  color: #006984;
  color: var(--green-color);
}
hr {
  border: none;
  height: 0.1rem;

  background-color: #002f5b;

  background-color: var(--blue-color--dark);

  margin-top: 1.1rem;
  margin-bottom: 1.2rem;
}
blockquote {
  color: #006984;
  color: var(--green-color);
  font-weight: 700;
  margin: 1em 0;
  padding-left: 1em;

  border-left: 0.25em solid #002f5b;

  border-left: 0.25em solid var(--blue-color--dark);
}
:root {
  --grid-item-column-span: 1;
  --grid-columns-count: 12;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-columns: repeat(var(--grid-columns-count), 1fr);
  grid-column-gap: 0.5rem;

  margin-left: auto;
  margin-right: auto;
}
.grid--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.grid > .col1 {
  grid-column: span 1;
}
.grid > .col2 {
  grid-column: span 2;
}
.grid > .col3 {
  grid-column: span 3;
}
.grid > .col4 {
  grid-column: span 4;
}
.grid > .col5 {
  grid-column: span 5;
}
.grid > .col6 {
  grid-column: span 6;
}
.grid > .col7 {
  grid-column: span 7;
}
.grid > .col8 {
  grid-column: span 8;
}
.grid > .col9 {
  grid-column: span 9;
}
.grid > .col10 {
  grid-column: span 10;
}
.grid > .col11 {
  grid-column: span 11;
}
.grid > .col12 {
  grid-column: span 12;
}
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0.5rem;
  width: 100%;
}
footer p {
  margin-bottom: 0;
}
.footer--right {
  left: auto;
  right: 0;
  text-align: right;
}
code {
  /* display: block; */
  font-family: "IBM Plex Mono", monospace;
  white-space: pre;
  font-size: 90%;
  line-height: 1.2;
  margin: 0;
}
/*  inline code */
:not(pre) > code {
  background-color: #e6e8ea;
  background-color: var(--gray-color);
  font-size: 80%;
  border-radius: 0.2em;
  padding: 0.1em 0.4em;
  margin: 0;
}
/* block code */
pre[\:has\(\%3E\%20code\)] {
  line-height: 1.2;
}
pre:has(> code) {
  line-height: 1.2;
}
code.code--background,
.code--background code {
  border-radius: 0.2em;
  padding: 0.2em 0.4em;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.2);
  background-color: var(--code-color-background);
}
.hljs-keyword {
  color: #0054a2;
  color: var(--blue-color);
}
.hljs-title.function_ {
  color: rgb(25, 160, 202);
  color: var(--cyan-color);
}
.hljs-attr,
.hljs-attribute,
.hljs-meta-keyword {
  font-style: italic;
  color: rgb(25, 160, 202);
  color: var(--cyan-color);
}
.hljs-property,
.hljs-variable {
  color: #006984;
  color: var(--green-color);
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #a7a9ab;
  color: var(--gray-color--dark);
}
.hljs-name,
.hljs-meta,
.hljs-keyword {
  font-weight: bold;
}
.hljs-literal,
.hljs-number {
  color: #004d61;
  color: var(--green-color--dark);
}
.hljs-emphasis {
  font-style: italic;
}
.language-html .hljs-name {
  color: #0054a2;
  color: var(--blue-color);
}
.language-xml .hljs-name {
  color: #0054a2;
  color: var(--blue-color);
}
.language-html .hljs-string {
  color: #004d61;
  color: var(--green-color--dark);
}
.language-xml .hljs-string {
  color: #004d61;
  color: var(--green-color--dark);
}
.iframe--fill {
  width: 100%;
  height: 100%;
  border: 0;
}
/* slide */
/* PROPER THEMING */
.slide {
  --slide-color: inherit;
  color: var(--slide-color);

  --slide-letter-spacing-general: var(--letter-spacing--positive);
  letter-spacing: var(--slide-letter-spacing-general);

  --slide-bar-color: var(--blue-color--dark);
}
.slide--hidden {
  opacity: 0;
}
.slides__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.slides__content > h1:first-child,
.slides__content > h2:first-child,
.slides__content > h3:first-child {
  margin-top: 0em;
  margin-bottom: 2em;
}
/* 
style-image 
and
style-negative 
*/
.slide--style-image,
.slide--style-negative {
  --slide-color: white;
  --a-color: var(--cyan-color--light);
  --slide-letter-spacing-general: var(--letter-spacing--negative);
  --code-color-background: rgba(255, 255, 255, 0.2);
}
.slide--style-negative {
  --slide-bar-color: white;
}
/* slide-title in blue-box */
.slide--style-image .slides__content > h2 {
  display: inline-block;
  color: white;
  background-color: rgba(255, 255, 255, 0.85);
  background-color: #002f5b;
  background-color: var(--blue-color--dark);
  padding: 0.2rem 0.6rem;
  margin-top: -0.2rem;
}
.slide--style-image footer {
  color: white;
  background-color: #002f5b;
  background-color: var(--blue-color--dark);
  display: inline-block;
  width: auto;
  padding: 0.2rem 0.6rem;
  padding-bottom: 0;
  margin-bottom: -0.4rem;
  z-index: 9;
}
.slides__stage {
  --slide-stage-padding-left-right: 1rem;
  --slide-stage-padding-top: 1.5rem;
  --slide-stage-padding-bottom: 1.65rem;

  width: 30rem;

  width: calc(1rem*(var(--slide-width)/var(--font-size)));
  height: 21.875rem;
  height: calc(1rem*(var(--slide-height)/var(--font-size)));

  position: absolute;
  top: 50%;

  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.slides__stage:before,
.slides__stage:after {
  left: var(--slide-stage-padding-left-right);
  width: calc(100% - var(--slide-stage-padding-left-right)*2);
  content: "";
  display: block;
  border-top: 0.5rem solid var(--slide-bar-color);
  position: absolute;
}
.slides__stage:before {
  top: 0.9rem;
}
.slides__stage:after {
  bottom: 1rem;
}
.slides__stage-inner {
  width: calc(100% - var(--slide-stage-padding-left-right)*2);
  height: calc(100% - var(--slide-stage-padding-top) - var(--slide-stage-padding-bottom));

  padding: var(--slide-stage-padding-top) var(--slide-stage-padding-left-right)
    var(--slide-stage-padding-bottom) var(--slide-stage-padding-left-right);
}
.slides__content {
  height: 100%;
  position: relative;
}
.slides__background-inner {
  width: 100%;
  height: 100%;
}
/* ------------ img */
.slide--style-negative .slides__background {
  background-color: #002f5b;
  background-color: var(--blue-color--dark);
}
.slide--style-negative h1,
.slide--style-negative h3 {
  color: white;
}
.slide--style-negative h2 {
  color: rgb(21, 186, 247);
  color: var(--cyan-color--light);
}
.slide--style-negative h2 strong {
  color: white;
}
.slide--style-negative em {
  color: yellow;
}
.slide--style-negative strong {
  color: rgb(21, 186, 247);
  color: var(--cyan-color--light);
}
/* components */
.box {
}
/* 
.box {
  padding: 0.25rem;
  font-size: 0.7rem;
  color: black;
} 
*/
.box--bottom {
  bottom: -0.2rem;
  position: absolute;
}
.box--right {
  position: absolute;
  right: 0;
}
.box--w10p {
  width: 10%;
}
.box--w20p {
  width: 20%;
}
.box--w30p {
  width: 30%;
}
.box--w40p {
  width: 40%;
}
.box--w50p {
  width: 50%;
}
.box--w60p {
  width: 60%;
}
.box--w70p {
  width: 70%;
}
.box--w80p {
  width: 80%;
}
.box--w90p {
  width: 90%;
}
.box--w100p {
  width: 100%;
}
.box--ratio-16-9 {
  aspect-ratio: 16 / 9;
}
/* box over whole slide */
.box--img-cover {
  position: absolute;
  overflow: hidden;
  top: -0.1rem;
  bottom: -0.2rem;
}
.box--img-cover p {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}
.box--img-cover img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
/* box with white background */
.box--white {
  background-color: rgba(255, 255, 255, 0.85);
  color: black;
  letter-spacing: 0;
  letter-spacing: var(--letter-spacing--positive);
}
.box--padding {
  padding: 0.25rem;
  /* font-size: 0.7rem; */
}