/* use Andika - Regular in .woff format */
@font-face {
    font-family: AndikaW;
    src: url(/slides-xt/assets/Andika-Regular-D0XX4y4h.woff2);
}

/* use Andika - Italic in .woff2 format */
@font-face {
    font-family: AndikaW;
    font-style: italic;
    src: url(/slides-xt/assets/Andika-Italic-BjJLuBzS.woff2);
}

/* use Andika - Bold in .woff2 format */
@font-face {
    font-family: AndikaW;
    font-weight: bold;
    src: url(/slides-xt/assets/Andika-Bold-Dvvr-eM2.woff2);
}

/* use Andika - Bold Italic in .woff2 format */
@font-face {
    font-family: AndikaW;
    font-weight: bold;
    font-style: italic;
    src: url(/slides-xt/assets/Andika-BoldItalic-DBIwlaEf.woff2);
}

@font-face {
    font-family: AnonymousPro;
    src: url(/slides-xt/assets/anonymous_pro-Cak-IzWC.ttf);
}

@font-face {
    font-family: AnonymousPro;
    font-style: italic;
    src: url(/src/fonts/anonymouspro/Anonymous_pro_i.ttf);
}

@font-face {
    font-family: AnonymousPro;
    font-weight: bold;
    src: url(/slides-xt/assets/anonymous_pro_b-DBogznI9.ttf);
}

@font-face {
    font-family: AnonymousPro;
    font-weight: bold;
    font-style: italic;
    src: url(/slides-xt/assets/anonymous_pro_bi-BmVzXh-h.ttf);
}

body,
body .reveal,
body .reveal a,
body .reveal blockquote,
body .reveal cite,
body .reveal h1,
body .reveal h2,
body .reveal h3,
body .reveal h4,
body .reveal h5,
body .reveal h6,
body .reveal li,
body .reveal p,
body .reveal section,
body .reveal td,
body .reveal th,
body .reveal ul
{
    overflow-wrap: normal;
    text-wrap: balance;
    text-wrap-mode: wrap;
    text-wrap-style: balance;
    letter-spacing: 0.05ch;
    word-spacing: 0.2ch;
    line-break: strict;
    word-break: normal;
    line-height: 1.3;
}

body .reveal var
{
    font-family: var(--r-code-font);
    font-style: normal;
    font-size: 80%;
    overflow-wrap: normal;
    text-wrap: balance;
    text-wrap-mode: wrap;
    text-wrap-style: balance;
    line-break: strict;
    word-break: normal;
    line-height: 1.0;
}

.twoColumn {
    columns: 2;
}

.twoColumn>li {
    margin-right: 1em;
    margin-left: 1em;
}

.little {
    font-size: 70.7%;
}

.reveal table.wikitable {
    margin: 0 0;
    text-align: center;
    font-size: 40%;
}

.reveal table.wikitable td,
.reveal table.wikitable th 
{
    text-align: center;
    vertical-align: middle;
    padding: 0.1ex 0.3ch 0.1ex 0.3ch;
    margin: 0;
}

.columns {
    display: flex;
}

.column {
    flex: 1;
}

body {
    --r-main-font: 'AndikaW', 'Arial', sans-serif;
    --r-code-font: 'AnonymousPro', 'Consolas', monospace;
    --r-heading-font: 'AndikaW', 'Arial', sans-serif;
    --r-background-color: #ffe;
    --r-block-margin: 0.5ch;
    --r-heading3-font-size: 1.2em;
    --r-heading4-font-size: 1.1em;
    --r-heading-margin: 0 0 0.3333em 0;
    font-feature-settings: "cv10" 1, "cv39" 1;
    --pre-bg-color: white;
    --pre-color: black;
    color: black;
}

cite {
    font-size: 50%;
    line-height: normal;
    display: block;
}

section a {
    overflow-wrap: break-word;
    word-break: break-all;
}

h3>b {
    font-size: 133%;
}

body code>pre {
    background-color: red !important;
    color: yellow;
}

body code {
    letter-spacing: 0;
    font-size: 85%;
}

body .reveal pre {
    letter-spacing: 0;
    word-spacing: normal;
    margin: 1ex auto;
    width: 100%;
    font-size: calc(var(--r-main-font-size) * 0.61);
    line-height: normal;
    background-color: var(--pre-bg-color);
    color: var(--pre-color);
}

section>li {
    background-color: red;
}

dl,
body .reveal section>dl,
ol,
body .reveal section>ol,
ul,
body .reveal section>ul {
    margin: 0;
    display: block;
}

dl,
body .reveal section>dl {
    display: flow-root;
}

dl>dt,
body .reveal dl>dt {
    float: inline-start;
    clear: inline-start;
    display: block;
    min-width: 0;
    max-width: 50%;
}

dl>dd,
body .reveal dl>dd {
    display: block;
    clear: none;
    float: none;
    margin: 0;
    padding: 0;
}

dt::after {
    content: "—";
}

dd>ul,
body .reveal dd>ul {
    display: block;
    clear: left;
    float: none;
    font-size: 90%;
}

input[type='date'], input[type='submit'], select, input[type='file'] {
    font-size: 75%;
}

input[type='checkbox'], input[type='radio'] {
    width: 1.5lh;
    height: 1.5lh;
}

input[type='range'] {
    height: 1.5lh;
}

form {
    border: 0.5ex dashed black;
}

/* Properly formats code segment when you print the slides. Currently when you print the slides or download slides
in Ipad for annotation or on computer for notes, the code segment is big and because its big , it adds a scrollabar bar
at the end. But when you print the notes , you cannot access the scrollbar making the code cut off. 
Using this css , it will format the code better and make sure it will remain within the Container box and 
when the notes are printed , it will adjust accordinly to the container and make sure the whole code segment is seen*/
@media print {
    body code {
      font-size: calc(0.3vw + 1vh);
    }
  }

.index-button {
    --index-button-font-size: 4;
    position: absolute;
    display: block;
    color: var(--r-link-color);
    text-decoration: none;
    font-size: calc(100% * var(--index-button-font-size));
    bottom: calc(1.4em / var(--index-button-font-size));
    right: calc(10.5em / var(--index-button-font-size));
    width: calc(3.6em / var(--index-button-font-size));
    height: 1em;
    opacity: 0.3;
    z-index: 22;
    pointer-events: auto;
    font-weight: bold;
}

.index-button:hover {
    opacity: 1.0;
}

body {
    --animation-bg-color: yellow;
}

@keyframes a01 {
    0% { background-color: var(--animation-bg-color); }
    4% { background-color: var(--animation-bg-color);}
    5% { background-color: revert-layer; }
    99% { background-color: revert-layer; }
}

@keyframes a02 {
    0% { background-color: revert-layer; }
    5% { background-color: var(--animation-bg-color); }
    9% { background-color: var(--animation-bg-color);}
    10% { background-color: revert-layer; }
    4% { background-color: revert-layer; }
}

@keyframes a03 {
    0% { background-color: revert-layer; }
    10% { background-color: var(--animation-bg-color); }
    14% { background-color: var(--animation-bg-color);}
    15% { background-color: revert-layer; }
    9% { background-color: revert-layer; }
}

@keyframes a04 {
    0% { background-color: revert-layer; }
    15% { background-color: var(--animation-bg-color); }
    19% { background-color: var(--animation-bg-color);}
    20% { background-color: revert-layer; }
    14% { background-color: revert-layer; }
}

@keyframes a05 {
    0% { background-color: revert-layer; }
    20% { background-color: var(--animation-bg-color); }
    24% { background-color: var(--animation-bg-color);}
    25% { background-color: revert-layer; }
    19% { background-color: revert-layer; }
}

@keyframes a06 {
    0% { background-color: revert-layer; }
    25% { background-color: var(--animation-bg-color); }
    29% { background-color: var(--animation-bg-color);}
    30% { background-color: revert-layer; }
    24% { background-color: revert-layer; }
}

@keyframes a07 {
    0% { background-color: revert-layer; }
    30% { background-color: var(--animation-bg-color); }
    34% { background-color: var(--animation-bg-color);}
    35% { background-color: revert-layer; }
    29% { background-color: revert-layer; }
}

@keyframes a08 {
    0% { background-color: revert-layer; }
    35% { background-color: var(--animation-bg-color); }
    39% { background-color: var(--animation-bg-color);}
    40% { background-color: revert-layer; }
    34% { background-color: revert-layer; }
}

@keyframes a09 {
    0% { background-color: revert-layer; }
    40% { background-color: var(--animation-bg-color); }
    44% { background-color: var(--animation-bg-color);}
    45% { background-color: revert-layer; }
    39% { background-color: revert-layer; }
}

@keyframes a10 {
    0% { background-color: revert-layer; }
    45% { background-color: var(--animation-bg-color); }
    49% { background-color: var(--animation-bg-color);}
    50% { background-color: revert-layer; }
    44% { background-color: revert-layer; }
}

@keyframes a11 {
    0% { background-color: revert-layer; }
    50% { background-color: var(--animation-bg-color); }
    54% { background-color: var(--animation-bg-color);}
    55% { background-color: revert-layer; }
    49% { background-color: revert-layer; }
}

@keyframes a12 {
    0% { background-color: revert-layer; }
    55% { background-color: var(--animation-bg-color); }
    59% { background-color: var(--animation-bg-color);}
    60% { background-color: revert-layer; }
    54% { background-color: revert-layer; }
}

@keyframes a13 {
    0% { background-color: revert-layer; }
    60% { background-color: var(--animation-bg-color); }
    64% { background-color: var(--animation-bg-color);}
    65% { background-color: revert-layer; }
    59% { background-color: revert-layer; }
}

@keyframes a14 {
    0% { background-color: revert-layer; }
    65% { background-color: var(--animation-bg-color); }
    69% { background-color: var(--animation-bg-color);}
    70% { background-color: revert-layer; }
    64% { background-color: revert-layer; }
}

@keyframes a15 {
    0% { background-color: revert-layer; }
    70% { background-color: var(--animation-bg-color); }
    74% { background-color: var(--animation-bg-color);}
    75% { background-color: revert-layer; }
    69% { background-color: revert-layer; }
}

@keyframes a16 {
    0% { background-color: revert-layer; }
    75% { background-color: var(--animation-bg-color); }
    79% { background-color: var(--animation-bg-color);}
    80% { background-color: revert-layer; }
    74% { background-color: revert-layer; }
}

@keyframes a17 {
    0% { background-color: revert-layer; }
    80% { background-color: var(--animation-bg-color); }
    84% { background-color: var(--animation-bg-color);}
    85% { background-color: revert-layer; }
    79% { background-color: revert-layer; }
}

@keyframes a18 {
    0% { background-color: revert-layer; }
    85% { background-color: var(--animation-bg-color); }
    89% { background-color: var(--animation-bg-color);}
    90% { background-color: revert-layer; }
    84% { background-color: revert-layer; }
}

@keyframes a19 {
    0% { background-color: revert-layer; }
    90% { background-color: var(--animation-bg-color); }
    94% { background-color: var(--animation-bg-color);}
    95% { background-color: revert-layer; }
    89% { background-color: revert-layer; }
}

@keyframes a20 {
    0% { background-color: revert-layer; }
    95% { background-color: var(--animation-bg-color); }
    99% { background-color: var(--animation-bg-color);}
    100% { background-color: revert-layer; }
    94% { background-color: revert-layer; }
}

body section span.a01 {
    animation-name: a01;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a02 {
    animation-name: a02;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a03 {
    animation-name: a03;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a04 {
    animation-name: a04;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a05 {
    animation-name: a05;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a06 {
    animation-name: a06;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a07 {
    animation-name: a07;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a08 {
    animation-name: a08;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a09 {
    animation-name: a09;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a10 {
    animation-name: a10;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a11 {
    animation-name: a11;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a12 {
    animation-name: a12;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a13 {
    animation-name: a13;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a14 {
    animation-name: a14;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a15 {
    animation-name: a15;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a16 {
    animation-name: a16;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a17 {
    animation-name: a17;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a18 {
    animation-name: a18;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a19 {
    animation-name: a19;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body section span.a20 {
    animation-name: a20;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

body span.v1 {
    color: #d00;
}

body span.v2 {
    color: #04f;
}