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

  /* font feature settings */
  --work-sans-fea-aalt: "aalt" off;
  --work-sans-fea-c2sc: "c2sc" off;
  --work-sans-fea-calt: "calt" on;
  --work-sans-fea-case: "case" off;
  --work-sans-fea-dlig: "dlig" off;
  --work-sans-fea-dnom: "dnom" off;
  --work-sans-fea-frac: "frac" off;
  --work-sans-fea-hist: "hist" off;
  --work-sans-fea-liga: "liga" on;
  --work-sans-fea-lnum: "lnum" off;
  --work-sans-fea-locl: "locl" off;
  --work-sans-fea-nalt: "nalt" off;
  --work-sans-fea-numr: "numr" off;
  --work-sans-fea-onum: "onum" off;
  --work-sans-fea-ordn: "ordn" off;
  --work-sans-fea-ornm: "ornm" off;
  --work-sans-fea-pnum: "pnum" off;
  --work-sans-fea-rvrn: "rvrn" off;
  --work-sans-fea-salt: "salt" off;
  --work-sans-fea-sinf: "sinf" off;
  --work-sans-fea-smcp: "smcp" off;
  --work-sans-fea-ss02: "ss02" off;
  --work-sans-fea-ss03: "ss03" off;
  --work-sans-fea-ss04: "ss04" off;
  --work-sans-fea-ss05: "ss05" off;
  --work-sans-fea-subs: "subs" off;
  --work-sans-fea-sups: "sups" off;
  --work-sans-fea-tnum: "tnum" off;
  --work-sans-fea-zero: "zero" off;
  --work-sans-fea-cpsp: "cpsp" off;
  --work-sans-fea-kern: "kern" on;
}
:root {
  font-family: "Work Sans", "Noto Emoji", sans-serif;

  -webkit-font-feature-settings: "aalt" off, "c2sc" off,
    "calt" on, "case" off,
    "dlig" off, "dnom" off,
    "frac" off, "hist" off,
    "liga" on, "lnum" off,
    "locl" off, "nalt" off,
    "numr" off, "onum" off,
    "ordn" off, "ornm" off,
    "pnum" off, "rvrn" off,
    "salt" off, "sinf" off,
    "smcp" off, "ss02" off,
    "ss03" off, "ss04" off,
    "ss05" off, "subs" off,
    "sups" off, "tnum" off,
    "zero" off, "cpsp" off,
    "kern" on;

          font-feature-settings: "aalt" off, "c2sc" off,
    "calt" on, "case" off,
    "dlig" off, "dnom" off,
    "frac" off, "hist" off,
    "liga" on, "lnum" off,
    "locl" off, "nalt" off,
    "numr" off, "onum" off,
    "ordn" off, "ornm" off,
    "pnum" off, "rvrn" off,
    "salt" off, "sinf" off,
    "smcp" off, "ss02" off,
    "ss03" off, "ss04" off,
    "ss05" off, "subs" off,
    "sups" off, "tnum" off,
    "zero" off, "cpsp" off,
    "kern" on;

  -webkit-font-feature-settings: var(--work-sans-fea-aalt), var(--work-sans-fea-c2sc),
    var(--work-sans-fea-calt), var(--work-sans-fea-case),
    var(--work-sans-fea-dlig), var(--work-sans-fea-dnom),
    var(--work-sans-fea-frac), var(--work-sans-fea-hist),
    var(--work-sans-fea-liga), var(--work-sans-fea-lnum),
    var(--work-sans-fea-locl), var(--work-sans-fea-nalt),
    var(--work-sans-fea-numr), var(--work-sans-fea-onum),
    var(--work-sans-fea-ordn), var(--work-sans-fea-ornm),
    var(--work-sans-fea-pnum), var(--work-sans-fea-rvrn),
    var(--work-sans-fea-salt), var(--work-sans-fea-sinf),
    var(--work-sans-fea-smcp), var(--work-sans-fea-ss02),
    var(--work-sans-fea-ss03), var(--work-sans-fea-ss04),
    var(--work-sans-fea-ss05), var(--work-sans-fea-subs),
    var(--work-sans-fea-sups), var(--work-sans-fea-tnum),
    var(--work-sans-fea-zero), var(--work-sans-fea-cpsp),
    var(--work-sans-fea-kern);

          font-feature-settings: var(--work-sans-fea-aalt), var(--work-sans-fea-c2sc),
    var(--work-sans-fea-calt), var(--work-sans-fea-case),
    var(--work-sans-fea-dlig), var(--work-sans-fea-dnom),
    var(--work-sans-fea-frac), var(--work-sans-fea-hist),
    var(--work-sans-fea-liga), var(--work-sans-fea-lnum),
    var(--work-sans-fea-locl), var(--work-sans-fea-nalt),
    var(--work-sans-fea-numr), var(--work-sans-fea-onum),
    var(--work-sans-fea-ordn), var(--work-sans-fea-ornm),
    var(--work-sans-fea-pnum), var(--work-sans-fea-rvrn),
    var(--work-sans-fea-salt), var(--work-sans-fea-sinf),
    var(--work-sans-fea-smcp), var(--work-sans-fea-ss02),
    var(--work-sans-fea-ss03), var(--work-sans-fea-ss04),
    var(--work-sans-fea-ss05), var(--work-sans-fea-subs),
    var(--work-sans-fea-sups), var(--work-sans-fea-tnum),
    var(--work-sans-fea-zero), var(--work-sans-fea-cpsp),
    var(--work-sans-fea-kern);

  --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: 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,
.code {
  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 {
  width: 100%;
  height: 100%;
  border: 0;
}
table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;

  margin-top: 1em;
  margin-bottom: 1em;
}
th:not([align]) {
  text-align: left;
}
tr {
  border-bottom: max(0.06rem, 1px) solid #e6e8ea;
  border-bottom: max(0.06rem, 1px) solid var(--gray-color);
}
td,
th {
  vertical-align: top;
  padding-right: 1em;

  padding-top: 0.25em;
  padding-bottom: 0.25em;
}
td:last-child,
th:last-child {
  padding-right: 0;
}
table {
  /* lining figures in tables */
  --work-sans-fea-pnum: "pnum" off;
  --work-sans-fea-lnum: "lnum" on;

  -webkit-font-feature-settings: "aalt" off, "c2sc" off,
    "calt" on, "case" off,
    "dlig" off, "dnom" off,
    "frac" off, "hist" off,
    "liga" on, "lnum" off,
    "locl" off, "nalt" off,
    "numr" off, "onum" off,
    "ordn" off, "ornm" off,
    "pnum" off, "rvrn" off,
    "salt" off, "sinf" off,
    "smcp" off, "ss02" off,
    "ss03" off, "ss04" off,
    "ss05" off, "subs" off,
    "sups" off, "tnum" off,
    "zero" off, "cpsp" off,
    "kern" on;

          font-feature-settings: "aalt" off, "c2sc" off,
    "calt" on, "case" off,
    "dlig" off, "dnom" off,
    "frac" off, "hist" off,
    "liga" on, "lnum" off,
    "locl" off, "nalt" off,
    "numr" off, "onum" off,
    "ordn" off, "ornm" off,
    "pnum" off, "rvrn" off,
    "salt" off, "sinf" off,
    "smcp" off, "ss02" off,
    "ss03" off, "ss04" off,
    "ss05" off, "subs" off,
    "sups" off, "tnum" off,
    "zero" off, "cpsp" off,
    "kern" on;

  -webkit-font-feature-settings: var(--work-sans-fea-aalt), var(--work-sans-fea-c2sc),
    var(--work-sans-fea-calt), var(--work-sans-fea-case),
    var(--work-sans-fea-dlig), var(--work-sans-fea-dnom),
    var(--work-sans-fea-frac), var(--work-sans-fea-hist),
    var(--work-sans-fea-liga), var(--work-sans-fea-lnum),
    var(--work-sans-fea-locl), var(--work-sans-fea-nalt),
    var(--work-sans-fea-numr), var(--work-sans-fea-onum),
    var(--work-sans-fea-ordn), var(--work-sans-fea-ornm),
    var(--work-sans-fea-pnum), var(--work-sans-fea-rvrn),
    var(--work-sans-fea-salt), var(--work-sans-fea-sinf),
    var(--work-sans-fea-smcp), var(--work-sans-fea-ss02),
    var(--work-sans-fea-ss03), var(--work-sans-fea-ss04),
    var(--work-sans-fea-ss05), var(--work-sans-fea-subs),
    var(--work-sans-fea-sups), var(--work-sans-fea-tnum),
    var(--work-sans-fea-zero), var(--work-sans-fea-cpsp),
    var(--work-sans-fea-kern);

          font-feature-settings: var(--work-sans-fea-aalt), var(--work-sans-fea-c2sc),
    var(--work-sans-fea-calt), var(--work-sans-fea-case),
    var(--work-sans-fea-dlig), var(--work-sans-fea-dnom),
    var(--work-sans-fea-frac), var(--work-sans-fea-hist),
    var(--work-sans-fea-liga), var(--work-sans-fea-lnum),
    var(--work-sans-fea-locl), var(--work-sans-fea-nalt),
    var(--work-sans-fea-numr), var(--work-sans-fea-onum),
    var(--work-sans-fea-ordn), var(--work-sans-fea-ornm),
    var(--work-sans-fea-pnum), var(--work-sans-fea-rvrn),
    var(--work-sans-fea-salt), var(--work-sans-fea-sinf),
    var(--work-sans-fea-smcp), var(--work-sans-fea-ss02),
    var(--work-sans-fea-ss03), var(--work-sans-fea-ss04),
    var(--work-sans-fea-ss05), var(--work-sans-fea-subs),
    var(--work-sans-fea-sups), var(--work-sans-fea-tnum),
    var(--work-sans-fea-zero), var(--work-sans-fea-cpsp),
    var(--work-sans-fea-kern);
}
mark {
  color: white;
  background: #006984;
  background: var(--green-color);
  text-shadow: none;
  font-size: 100%;
  border-radius: 0.2em;
  padding: 0.1em 0.2em;
  margin: 0;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mark--secondary {
  color: #fff;
  background: rgb(178, 112, 0);
  background: var(--brown-color);
}
/* 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;
  position: absolute;
  z-index: -1;
}
.slides__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.slides__content > h2:first-child {
  margin-top: 0em;
  margin-bottom: 1.75em;
}
/* 
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-iframe,
.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; */
}
@media print {
  @page {
    size: 288mm 210mm;
    size: calc(210mm/var(--slide-height)*var(--slide-width)) 210mm; /* fit to A4 */
    margin: 0;
  }

  .slide {
    position: relative;
    height: 100vh;
    aspect-ratio: 960 / 700;
    aspect-ratio: var(--slide-width) / var(--slide-height);
    page-break-before: always;
  }

  .slides__stage {
    top: 0;
    left: 0;
    -webkit-transform: none;
            transform: none;
  }

  .slide--hidden {
    opacity: 1;
  }

  .noPrint {
    display: none;
  }
}