/**
 * ACME theme for reveal.js.
 *
 */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight&family=Inter&family=Noto+Sans&family=Source+Code+Pro&display=swap');

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 {

  --color-1-navy-black: #002041;
  --color-1-light-grey: #F7F7F9;
  --color-1-purple: #6E37FA;
  --color-1-aqua: #7AC8BD;
  --color-1-orange: #FF9408;
  --color-1-red: #F40953;

  --color-2-magenta: #FA32A0;
  --color-2-eggplant: #B30095;
  --color-2-canary: #FFD500;
  --color-2-charteuse: #8FE964;
  --color-2-mint: #4FE6AA;
  --color-2-cobalt: #2765F0;

  --color-primary: var(--color-1-light-grey);

  --r-background-color: var(--color-1-navy-black);

  --r-main-font: 'Inter', sans-serif;
  --r-main-font-size: 2.4em;
  --r-main-color: #eee;
  --r-block-margin: 20px;
  --r-heading-font:  'Inter Tight', sans-serif;
  --r-heading-margin: 0 0 20px 0;
  --r-heading-color: #eee;
  --r-heading-line-height: 1.2;
  --r-heading-letter-spacing: normal;
  --r-heading-text-transform: none; /* uppercase; */
  --r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  --r-heading-font-weight: 600;
  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
  --r-heading2-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
  --r-heading1-size: 2.77em;
  --r-heading2-size: 1.811em;
  --r-heading3-size: 1.25em;
  --r-heading4-size: 1em;
  --r-footnote-size: 0.6em;
  --r-code-font: 'Source Code Pro', monospace;
  --r-code-size: 0.85em;
  --r-link-color: #13DAEC;
  --r-link-color-dark: #0d99a5;
  --r-link-color-hover: #71e9f4;
  --r-selection-background-color: #FF5E99;
  --r-selection-color: #fff;  
}

body {
  font-variant-ligatures: no-common-ligatures;
  counter-reset: chapter; 
}

.emoji {
  /* https://codepen.io/walpolea/pen/BaaLgee */
  /* filter: sepia(0.12) hue-rotate(220deg) saturate(3); */
  filter: sepia(0.12) hue-rotate(180deg) saturate(1);
}

.reveal {
  --r-link-color: var(--color-1-light-grey);
  --r-italic-color: var(--color-1-aqua);
  --r-bold-color: var(--color-1-aqua);
}

.reveal .slides {
  text-align: left;
  margin-left: 5%;
  margin-right: 5%;
}

.reveal .slides pre {
text-align: left;
}

.reveal-viewport {
  /* https://www.acme.com/wp-content/uploads/sites/2/2023/07/100th-home-banner1XL-1240x496-1.png */
  /* background-image:  url(100th-home-banner1XL-1240x496-1.png);  */
  background-image:  url(/asset/revealjs/theme/background.png); 
   
  background-color: var(--r-background-color);
  background-size: 100% 100%; 

  /* backdrop-filter:brightness(40%) contrast(140%) blur(20px); */
  backdrop-filter:brightness(60%) contrast(120%)  blur(20px);
  /* background: color-mix(in srgb, var(--color-1-navy-black) 30%, url(nielsen-2023-bg-blue-secondary.jpg) 100%) */
  /* background-blend-mode: darken; */
}

.slide-background  {
  background-size: cover !important; 
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}


.reveal {
  font-family: var(--r-main-font);
  font-size: var(--r-main-font-size);
  font-weight: normal;
  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;
}

.reveal:has(.slides section.skip.present)::after  {
  content: "👁";
  font-variant-emoji: text;
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  opacity: 0.5;
  font-size: 0.5em;
}


/*********************************************
 * 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;
  font-variant-caps: titling-caps;
  font-variant-ligatures: no-common-ligatures;
}

.reveal h1 {
  font-size: var(--r-heading1-size);
  color: var(--color-1-light-grey);
  font-stretch: condensed;
  font-variant: normal;


  /* text-shadow: var(--r-heading1-text-shadow); */
}

.reveal h2 {
  font-size: var(--r-heading2-size);
  color: var(--color-1-light-grey);
  /* text-shadow: var(--r-heading2-text-shadow); */
}

.reveal h3 {
  font-size: var(--r-heading3-size);
  color: var(--color-1-aqua);
}

.reveal h4 {
  font-size: var(--r-heading4-size);
}


/*********************************************
 * 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 p:first-child,
.reveal blockquote p:last-child {
  display: inline-block;
}

.reveal q {
  font-style: italic;
}

.reveal p {
  font-family: var(--r-main-font);
}

.reveal blockquote, .reveal blockquote * {
  font-style: italic;
  font-family: serif;
}

.reveal blockquote {
  border-left: 0.2em solid var(--color-1-aqua);
  display: block;
  text-align: left;
  margin-left:0;

  /* position: relative; */
  width: 90%;
  /* margin: var(--r-block-margin) auto; */
  padding: 1em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-1-purple) 30%, transparent) 0%, transparent 100%);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.reveal blockquote strong {
  color: var(--color-1-orange);
}

.reveal ul, .reveal ol {
  list-style-type: none;
}

.reveal pre {
  display: block;
  position: relative;
  width: 80vw;
  /* margin: var(--r-block-margin) auto; */
  margin: 0;
  text-align: left;
  font-size: var(--r-code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  overflow:auto;
  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;
  background: color-mix(in srgb, var(--color-1-light-grey) 20%, transparent);
}


.reveal div.mermaid svg {
  background: color-mix(in srgb, var(--color-1-purple) 10%, transparent);
  padding: 2em;
}

.reveal pre.code-wrapper code {
  display: block;
  padding: 0.4em;
  overflow: auto;
  max-height: 1000px; 
  word-wrap: normal;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-1-purple) 30%, transparent) 0%, transparent 100%);
  width: 100%;
  margin-bottom: 1em;
}

.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;
  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);
  }
}


@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}


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

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


.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1em;
}

.reval .speaker-notes-pdf




/*.reveal .templates {
  display:none;
}*/


.reveal .watermark, .reveal .help {
  top:0;
  bottom:0;
  width:100%;
  height:100%;
}

.reveal .watermark .footer {
  position: absolute;
  font-size: 0.5em; 
  width: 100%;
  text-align: center;
  height: 1em;
  bottom: 1em;
  opacity:0.4;
}

.reveal .help .reminder {
  bottom: 4em;
  position: absolute;
  font-size: 1em;
  width: 100%;
  text-align: center;
  bottom: 2em;
  line-height:1.4em;

} 

.reveal .slide-number {
  left: 1em;
  right: none;
  bottom: 1em;
  font-size: 0.5em;
  top: none;
  background: none;
  opacity:0.4;
}

.reveal .controls {
   opacity:0.4;
}



.flex-container {
	display: flex;
	flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.flex-container.stack-left {
  justify-content: flex-start;
}

.flex-container > div {
	margin: 10px;
	padding: 20px;
}



ghost {
  color: var(--color-1-aqua);
  opacity: 0.5
}

.mermaid .nodeLabel, .mermaid .edgeLabel *, .mermaid .edgeLabel{
  color: var(--color-1-aqua);
}


.mermaid .edgeLabel div {
  background: color-mix(in srgb, var(--color-1-purple) 10%, transparent);
}

.mermaid .nodeLabel .edgeLabel {
  background: color-mix(in srgb, var(--color-1-purple) 10%, transparent) !important;
}

.reveal div.info p, mark {
  color: var(--color-2-canary);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-2-canary) 20%, transparent) 0%, transparent 100%);
}

.reveal div.warning p {
  color: var(--color-2-eggplant);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-2-canary) 20%, transparent) 0%, transparent 100%);
}

.reveal div.warning p .emoji   {
  filter: brightness(0.8) hue-rotate(260deg) saturate(4); 
}



.reveal a {
  color: var(--color-2-canary);
  border-bottom: dotted var(--color-1-aqua);
}

.reveal a:has(img) {
  border-bottom: none;
}

.reveal a:has(img):hover img {
  filter:saturate(120%) brightness(120%);
  outline: 1px dotted var(--color-1-aqua);
}


.reveal ul {
  list-style-type: disc;
  margin-left: 0.4em;
}

.reveal ul  li::marker {
  content: '⇒ ';
  font-size: 1em;
  color: var(--color-1-aqua)
}

.reveal ul  li {
  margin-bottom: 0.4em;
}

.reveal .speaker-notes-pdf, .reveal .speaker-notes {
  color: var(--color-1-navy-black) !important;
  background: white !important;
}

.reveal  .speaker-notes-pdf a, .reveal .speaker-notes a {
  color: var(--color-2-cobalt);
}

.reveal  .speaker-notes-pdf::before, .reveal  ::before {
  color: var(--color-1-purple);
  font-weight:bold;
}

body:has(.pdf-page) .help {
  display:none;
}


pre.output::before {
  content: "OUTPUT";
  line-height:1em;
  font-size: 0.8em;
  color: #3B439E;
  display: block;
  padding-left: 0.4em;
  padding-top: 0.4em;
  background: linear-gradient(90deg, color-mix(in srgb,var(--color-1-purple)  30%, transparent) 0%, transparent 100%);
} 

div.flex-container div p:has(img) {
  margin:0;
}

div.flex-container div p:has(img) img:first-child {
  margin:0;
}


::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-accent6);
  outline: 1px solid var(--color-accent5);
}

::-webkit-scrollbar {
  height: 4px;
  width: 4px;
  border: 1px solid var(--color-navy-black);
}



.footnote {
  margin-top:2em;
  font-size: inherit;
}

.footnote-annotation {
  font-size: var(--r-footnote-size);
  vertical-align:super;  
  opacity: 60%;
}

.reveal p:has(span.footnote) {
  font-size: var(--r-footnote-size);
  opacity: 60%;
}

.reveal div.chapter::after {
  counter-increment: chapter;
  /* content: "Chapter " counter(chapter);  */
  content: "Chapter"; 
  /*display:block;*/
  font-size: 0.8em;
  font-weight: bold;
  /* text-transform: uppercase; */
  font-style: italic;
  position:absolute;
  width: 100%;
  top:-1em;
  border-bottom: 0.1em solid var(--color-2-mint);
  left:0.1em;
  color: var(--color-2-mint);
  opacity: 40%;
}


.reveal div.section h1::before {
  /* content: "Section " counter(chapter) "." counter(section);  */
  content: "Section "; 
  display:block;
  font-size: 0.3em;
  font-variant: big-caps;
  font-style: italic;
  position:absolute;
  top:-1em;
  left:0.1em;
  color: var(--color-2-eggplant);
  border-bottom: 0.1em solid var(--color-2-eggplant);
  width: 100%;
  opacity: 60%;
  
}


.reveal h1 + ul {
  margin-top:2em;
  margin-left:1em;
}

.reveal h2 + ul {
  margin-top:1em;
  margin-left:1em;
}

/**
 * Layout helpers.
 */

// Stretch an element vertically based on available space
.reveal .stretch,
.reveal .r-stretch {
  max-width: none;
  max-height: none;
}

.reveal pre.stretch code,
.reveal pre.r-stretch code {
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

.reveal .r-fragment-stack > :not(.current-fragment) {
  height:0;
}

// Text that auto-fits its container
.reveal .r-fit-text {
  display: inline-block; // https://github.com/rikschennink/fitty#performance
  white-space: nowrap;
}

// Stack multiple elements on top of each other
 .reveal .r-fragment-stack, .reveal .r-stack {
    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.reveal .r-stack > * {
  margin: auto;
}

.reveal .r-fragment-stack > * {
  margin-top: auto;
  margin-bottom: auto;
}

// Horizontal and vertical stacks
.reveal .r-vstack,
.reveal .r-hstack {
  display: flex;
}

.reveal .r-vstack img,
.reveal .r-hstack img,
.reveal .r-vstack video,
.reveal .r-hstack video {
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}


.reveal .r-vstack {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reveal .r-hstack {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

// Naming based on tailwindcss
.reveal .items-stretch { align-items: stretch; }
.reveal .items-start { align-items: flex-start; }
.reveal .items-center { align-items: center; }
.reveal .items-end { align-items: flex-end; }

.reveal .justify-between { justify-content: space-between; }
.reveal .justify-around { justify-content: space-around; }
.reveal .justify-start { justify-content: flex-start; }
.reveal .justify-center { justify-content: center; }
.reveal .justify-end { justify-content: flex-end; }

.reveal .slides>section, .reveal .slides>section>section {
  width:auto !important;
  min-width: calc(100% - 14em);
  position:fixed;
}

div.slides  {
  padding: 2em;
  margin:0;
}

.reveal .slides>section.center {
  text-align:center;
}


/*
.reveal .slides>section .r-stack.top > * {
  position:absolute;
  width:100%;
}*/


key {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.1em 0.5em;
    margin: 0.2em 0.2em .2em;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
    background-color: #000;
}