@import url("../fonts/roboto.css");
@import url("../fonts/source-code-pro.css");

/* Derived CSS variables. 'Parameters' that need to be set either in
default.yaml or in variables.css:

  --font-size-base 
  --spacing-vertical-base
 
*/

:root {
  /* Calculate all font size variables depending on the base font size accessible 
   via yaml config */
  --font-size-medium: calc(var(--font-size-base) * 1);
  --font-size-normal: calc(var(--font-size-base) * 1);
  --font-size-xx-small: calc(var(--font-size-base) * 0.4);
  --font-size-x-small: calc(var(--font-size-base) * 0.6);
  --font-size-small: calc(var(--font-size-base) * 0.8);
  --font-size-large: calc(var(--font-size-base) * 1.2);
  --font-size-x-large: calc(var(--font-size-base) * 1.4);
  --font-size-xx-large: calc(var(--font-size-base) * 1.6);

  /* Similar to font size, this one defines the basic vertical spacing between elements
  this one is NOT used at the moment since Henrik had a similar but reduced solution */
  --margin-bottom-elements-base: var(--spacing-vertical-base);
  --margin-bottom-h1: calc(var(--margin-bottom-elements-base) * 1);
  --margin-bottom-h2: calc(var(--margin-bottom-elements-base) * 0);
  --margin-bottom-h2-block: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-h3: calc(var(--margin-bottom-elements-base) * 0);
  --margin-bottom-h3-block: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-p: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-ol: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-ul: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-dl: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-figure: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-img: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-blockquote: calc(var(--margin-bottom-elements-base) * 0.8);
  --margin-bottom-table: calc(var(--margin-bottom-elements-base) * 1);
  --margin-bottom-columns: calc(var(--margin-bottom-elements-base) * 0);
  --margin-bottom-references: calc(var(--margin-bottom-elements-base) * 0.3);
}

/* General setting for the used font, size and color. 
Requires the color variables to be set */
body.deck {
  font-family: var(--font-family);
  font-size: var(--font-size-medium);
  color: var(--foreground-color);
  background-color: var(--background-color);
}

/* Backwards compatibility from _fonts.scss, we went a long way to define 
how the font sizes should be specified. In general it would be better to have just 
one wy to set these but we want old sources to still work. Maybe clean-up later */
.medium,
.font-medium,
.font-size-medium,
.normal,
.font-normal,
.font-size-normal {
  font-size: var(--font-size-medium);
}

.xx-small,
.font-xx-small,
.font-size-xx-small {
  font-size: var(--font-size-xx-small);
}

.x-small,
.font-x-small,
.font-size-x-small {
  font-size: var(--font-size-x-small);
}

.small,
.font-small,
.font-size-small {
  font-size: var(--font-size-small);
}

.large,
.font-large,
.font-size-large {
  font-size: var(--font-size-large);
}

.x-large,
.font-x-large,
.font-size-x-large {
  font-size: var(--font-size-x-large);
}

.xx-large,
.font-xx-large,
.font-size-xx-large {
  font-size: var(--font-size-xx-large);
}

strong,
b {
  font-weight: 700;
}

em {
  font-style: italic;
}

.reveal h1 {
  font-weight: strong;
  font-size: var(--font-size-x-large);
  margin-bottom: 1.05rem;
}

.reveal h2 summary {
  font-weight: strong;
  font-size: var(--font-size-large);
}

.reveal h3 {
  font-weight: 400;
  font-size: var(--font-size-medium);
}

.reveal h4 {
  font-weight: 100;
  font-size: var(--font-size-medium);
}

.reveal
  section:is(.white, .inverse, .has-dark-background)
  :is(h1, h2, h3, h4, h5, h6) {
  color: var(--shade0);
}

.reveal section:is(.white, .inverse, .has-dark-background) {
  color: var(--shade0);
}

/* p, li {
  line-height: 1.3;
} */

/* From _titlepage.scss */

/* Title page */
section#title-slide .banner img {
  margin: 0px;
  height: 97px;
  object-fit: contain;
}

section#title-slide .title {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-weight: strong;
  font-size: var(--font-size-x-large);
  color: var(--shade7);
}

section#title-slide .subtitle {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: strong;
  font-size: var(--font-size-large);
  color: var(--shade7);
}

section#title-slide .date {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: strong;
  font-size: var(--font-size-large);
  color: var(--shade6);
}

section#title-slide .author {
  margin: 0;
  font-weight: strong;
  font-weight: normal;
  font-size: var(--font-size-large);
  color: var(--shade6);
}

section#title-slide .affiliation {
  margin: 0;
  font-weight: normal;
  font-size: var(--font-size-large);
  color: var(--shade6);
}

section#title-slide .teaser-img {
  margin: var(--title-page-vertical-margin) 0;
}

section#title-slide .teaser-img img {
  /* Center horizontally */
  display: block;
  margin: 0 auto;
  /* Make the image as max 250px high retaining aspect ratio */
  object-fit: contain;
  max-height: 500px;
  width: auto;
}

section#title-slide .affiliation-logo img {
  margin: calc(0.1 * var(--title-page-vertical-margin)) 0;
  height: var(--title-page-affiliation-logo-height);
  width: auto;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

section#title-slide .valign-block {
  text-align: center;
}

section#title-slide .valign-block:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
section#title-slide .valigned {
  display: inline-block;
  vertical-align: middle;
}

/* 
 Gap zwischen den areas am besten durch verschieben des top level 
 containers nach links um die Breite der seitlichen Auszeichnung
*/
div.alignment {
  margin-right: calc(var(--block-border-width) + var(--block-border-padding));
}

/* Blocks have some padding and a border to allow for highlighting without
disturbing the layout. This one is taken from styles.css from default and overwritten
here */
div.block {
  border-width: 0 0 0 var(--block-border-width);
  padding: 0 0 0 var(--block-border-padding);
  /* padding-left: var(--block-border-padding); */
  /* The next one is needed since the margins below blocks is missing 
   and it seems that the !important setting im styles.css in the 
   decker template kind oif collapses this one */
  margin-bottom: calc(1 * var(--vertical-margin)) !important;
}

/* Stretch the block header margin to the block border so that highlighting
works. */
div.block h2 {
  font-weight: strong;
  font-size: var(--font-size-large);
  padding: 0;
  /* margin: 0 0 calc(1 * var(--vertical-margin)) 0; */
  margin: 0;
}

/* The latter is already from styles.css for h1, p, div, ul, ol, table.
   However, We also didn't want the empty H2 to have the margin as well as
   the last list item (maybe the latter was just forgotten since ul and ol were 
   mentioned.
*/
:is(h2, li):last-child {
  margin-bottom: 0 !important;
}

/* How to repair the quiz buttons */
/* div.quiz ul li {  
   margin: 0px;
} */

/* Align headers with blocks. */
section h1 {
  padding-left: calc(var(--block-border-width) + var(--block-border-padding));
}

/* These are mapped to the available shades and accent colors in the palette. */
div.block.question {
  border-color: var(--accent0);
}

div.block.answer {
  border-color: var(--accent6);
}

div.block.observation {
  border-color: var(--accent7);
}

div.block.example {
  border-color: var(--accent2);
}

div.block.def,
div.block.definition {
  border-color: var(--shade6);
}

div.block.note {
  border-color: var(--accent1);
}

div.block.ale,
div.block.alert {
  border-color: var(--accent0);
}

div.block.equ,
div.block.equation {
  border-color: var(--shade6);
}

div.block.theorem {
  border-color: var(--shade6);
}

/* Wburg uses .align-* classes, so rename from align=*. 
   However, I used the default from Henrik for 4 lectures (PRIS, ML, HCI, ICG), hence
   it seems as if we stick with that and could remove the class-style stuff. */

/* Stuff with centered text can look good at times. */
.reveal .slides .align-center {
  text-align: center;
}
.reveal .slides .align-left {
  text-align: left;
}
.reveal .slides .align-right {
  text-align: right;
}

.align-center table {
  margin-left: auto;
  margin-right: auto;
}

/*********************************************
   * From mario.css: bibliography
   *********************************************/

.reveal .references {
  margin: auto;
  max-height: 600px;
  width: 90%;
  overflow-y: auto;
}

.reveal .references > div {
  padding-left: 1em;
  text-indent: -1em;
  text-align: left;
  margin-bottom: 1em;
}

/* Here I overwrite the color setting of the highlights */

a,
a:visited,
a:active {
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

/**** This is a layout to position elements at the bottom of the container, needs
   more tuning later ****/

div.flush-bottom {
  position: absolute;
  bottom: 0px;
}

div.flush-bottom-right {
  position: absolute;
  bottom: 0px;
  text-align: right;
}

/*********************************************
 * Quizzes with task list syntax
 *********************************************/

/* quiz flex layout */
.reveal .quiz ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  counter-reset: answer;
  margin-top: 1em;
}

/* possibility to hide quizzes */
.hide-quizzes .reveal .quiz,
.hide-quizzes .reveal .quiz * {
  visibility: hidden;
}

/* one quiz item */
.reveal .quiz ul li {
  display: inline-block;
  position: relative;
  text-align: left;
  margin: 0.5em;
  border: 3px solid var(--shade6);
  border-radius: 0.5em;
  padding: 0.5em;
  font-weight: normal;
  background-color: var(--shade1);
  cursor: pointer;
}

/* add A, B, C, D... */
.reveal .quiz ul.task-list > li::before {
  content: counter(answer, upper-latin) ": ";
  counter-increment: answer;
  margin-right: 0.5em;
  font-weight: bold;
}

/* remove task list checkbox */
.reveal .quiz ul.task-list li > input[type="checkbox"] {
  display: none;
}

/* 2nd level ul contains tool tip */
.reveal .quiz ul.task-list li ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* don't need this for 2nd level */
.reveal .quiz ul.task-list li ul li::before {
  display: none;
}

/* tool tip */
.reveal .quiz ul li ul li {
  display: block;
  visibility: hidden;
  max-width: 95%;
  top: 100%;
  left: 5px;
  background-color: grey;
  color: #ffffff;
  text-align: center;
  margin: 5px;
  padding: 5px;
  border-radius: 6px;
  border: none;
  position: absolute;
  z-index: 1;
  font-size: 1rem;
}

.reveal .quiz ul li.show-answer {
  /* background-color: var(--quiz-background-color);  */
  border-color: var(--quiz-border-color);
}

.reveal .quiz ul li.show-answer::after {
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 900;
  font-family: "Font Awesome 7 Free";
  content: var(--quiz-icon);
  position: absolute;
  font-size: var(--font-size-xx-large);
  right: var(--quiz-icon-offset);
  bottom: -0.4em;
  padding: 0.1em;
  color: var(--quiz-border-color);
}

/* tool tips are shown on hover */
.reveal .show-answer:hover ul li {
  visibility: visible;
}

/* once clicked, wrong answers are red */
.reveal .quiz ul li.wrong {
  --quiz-background-color: var(--accent0);
  --quiz-border-color: var(--accent0);
  --quiz-icon: "\f00d";
  --quiz-icon-offset: -1em;
}

/* once clicked, correct answers are green */
.reveal .quiz ul li.right {
  --quiz-background-color: var(--accent5);
  --quiz-border-color: var(--accent5);
  --quiz-icon: "\f00c";
  --quiz-icon-offset: -1.2em;
}

/*********************************************
  * override quiz-wue settings
  *********************************************/

.reveal [class*="quiz-"] button {
  font: inherit;
  font-size: 0.9em;
  margin: 0.5em;
  padding: 0.5em;
  color: var(--shade6);
  background: var(--shade1);
  border: 2px solid var(--icon-active-color);
  border-radius: 0.5em;
}

.reveal .quiz-ft button {
  display: none;
}

.reveal .quiz-ft input {
  font: inherit;
  font-size: 0.8em;
  margin: 0.5em;
  padding: 10px;
  border: 2px solid var(--blueish);
  color: var(--shade6);
  background-color: var(--shade1);
  outline: none;
}

.reveal .qft-solutions,
.reveal .qft-solutions.solved {
  display: none;
}

.reveal .quiz-ic select {
  font: inherit;
  font-size: 0.9em;
  font-weight: normal;
  padding: 5px;
  border: 2px solid var(--blueish);
  color: var(--shade6);
  background-color: var(--shade1);
  outline: none;
}

.reveal .quiz-ic option {
  font: inherit;
  font-size: inherit;
  font-weight: normal;
}

.reveal .quiz-mi {
  width: var(--slide-width);
  text-align: center;
}

.reveal .quiz-mi .buckets,
.reveal .quiz-mi .matchItems {
  box-sizing: border-box;
  border: 2px solid var(--shade3);
  padding: 15px 10px;
}

.reveal .quiz-mi .buckets {
  margin-bottom: 20px;
  margin-top: 60px;
}

.reveal .quiz-mi .buckets:before,
.reveal .quiz-mi .matchItems:before {
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 15px;
  background-color: var(--shade0);
  padding: 5px;
  color: var(--shade3);
}

.reveal .quiz-mi .matchItems:before {
  content: "Drag objects from here...";
}

.reveal .quiz-mi .buckets:before {
  content: "...and drop them here into the correct category";
}

:lang(de) .reveal .quiz-mi .matchItems:before {
  content: "Objekte per Drag & Drop nach unten ziehen...";
}

:lang(de) .reveal .quiz-mi .buckets:before {
  content: "...und hier in die richtige Kategorie einsortieren";
}

.reveal .quiz-mi .matchItems:after {
  position: absolute;
  bottom: -30px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid var(--shade3);
}

.reveal .quiz-mi .bucket {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 0px 5px;
  border: 1px solid var(--shade3);
}

.reveal .quiz-mi .matchItem {
  display: block;
  overflow: hidden;
  border: 2px solid var(--blueish);
  border-radius: 10px;
  padding: 10px;
  cursor: grab;
  margin: auto;
  background-color: var(--shade1);
}

.reveal [class*="quiz-"] .show-right {
  background-color: var(--green-background-color);
  border-color: var(--green-border-color);
}

.reveal [class*="quiz"] .show-wrong {
  background-color: var(--red-background-color);
  border-color: var(--red-border-color);
}

/*********************************************
 * quiz polling
 *********************************************/

.reveal-viewport:not(.poll) .poll-only {
  display: none;
}

#poll-chart {
  font-size: var(--icon-size);
  position: absolute;
  left: auto;
  top: auto;
  right: 0.5em;
  bottom: 0.5em;
  visibility: hidden;
  z-index: 34;
  width: 420px;
  height: 320px;
  margin: auto;
  padding: 0.5em;
  text-align: center;
  border: 3px solid var(--blueish);
  border-radius: 0.5em;
  background-color: var(--shade0);
  transform-origin: bottom right;
  box-shadow: 3px 5px 5px var(--shade3);
}

#poll-chart.canvas {
  top: 0;
  left: 0;
  width: 400px;
  height: 300px;
}

#poll-votes {
  font-size: var(--icon-size);
  color: var(--icon-inactive-color);
  text-align: center;
  display: none;
}

#qrcode-container {
  display: none;
  z-index: 4000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
#qrcode-container.show {
  display: flex;
}

#qrcode-canvas {
  height: 66vh;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background-color: white;
  padding: 0.5em;
  border-radius: 0.25em;
}
#qrcode-canvas.smaller {
  height: 33vh;
}

#qrcode-link {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5em;
  border-radius: 0.25em;
  background-color: var(--background-color);
}

#close-qr-button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4001;
  background-color: var(--background-color);
  border-radius: 100%;
  color: var(--icon-inactive-color);
}
#close-qr-button:hover {
  color: var(--icon-active-color);
}

/* This one should be beack to decker.css */
.reveal div.sourceCode pre div.language-label {
  font-family: "Roboto", sans-serif;
  position: absolute;
  right: 0;
  top: 0;
  color: #666;
  background-color: #eee;
  padding: 0em 0.4em;
  border-radius: 0.2em;
}

/* code highlighting with pandocs built-in skylight highlighter 
   adapted from Henriks template */

/* Inline code */
code {
  font-family: "Source Code Pro", monospace;
  font-variation-settings: "MONO" 1, "CASL" 0.1;
}

/* Code blocks. */
span.pre > code,
pre > code {
  font-size: 90%;
  line-height: 1.3;
}

/* Overwrite Pandoc's syntax highlighting CSS with palette colors */
pre > code.sourceCode {
  white-space: pre;
  position: relative;
}
pre > code.sourceCode > span {
  display: inline-block;
  line-height: 1.25;
}
pre > code.sourceCode > span:empty {
  height: 1.2em;
}
.sourceCode {
  overflow: visible;
}
code.sourceCode > span {
  color: inherit;
  text-decoration: inherit;
}
div.sourceCode {
  margin: 1em 0;
}
pre.sourceCode {
  margin: 0;
}
@media screen {
  div.sourceCode {
    overflow: auto;
  }
}
@media print {
  pre > code.sourceCode {
    white-space: pre-wrap;
  }
  pre > code.sourceCode > span {
    text-indent: -5em;
    padding-left: 5em;
  }
}
pre.numberSource code {
  counter-reset: source-line 0;
}
pre.numberSource code > span {
  position: relative;
  left: -4em;
  counter-increment: source-line;
}
pre.numberSource code > span > a:first-child::before {
  content: counter(source-line);
  position: relative;
  left: -1em;
  text-align: right;
  vertical-align: baseline;
  border: none;
  display: inline-block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0 4px;
  width: 4em;
}
pre.numberSource {
  margin-left: 3em;
  padding-left: 4px;
}
div.sourceCode {
  color: var(--shade7);
  background-color: var(--shade1);
}
@media screen {
  pre > code.sourceCode > span > a:first-child::before {
    text-decoration: underline;
  }
}

code span.al {
  color: var(--accent0);
} /* Alert */
code span.an {
  color: var(--accent5);
  font-weight: bold;
} /* Annotation */
code span.at {
} /* Attribute */
code span.bn {
  color: var(--accent1);
} /* BaseN */
code span.bu {
} /* BuiltIn */
code span.cf {
  color: var(--accent7);
} /* ControlFlow */
code span.ch {
  color: var(--accent3);
} /* Char */
code span.cn {
  color: var(--accent1);
  font-weight: bold;
} /* Constant */
code span.co {
  color: var(--shade6);
} /* Comment */
code span.cv {
  color: var(--shade5);
  font-weight: bold;
} /* CommentVar */
code span.do {
  color: var(--shade5);
} /* Documentation */
code span.dt {
  color: var(--accent1);
} /* DataType */
code span.dv {
  color: var(--accent1);
} /* DecVal */
code span.er {
  color: var(--accent7);
} /* Error */
code span.ex {
} /* Extension */
code span.fl {
  color: var(--accent1);
} /* Float */
code span.fu {
  color: var(--accent7);
} /* Function */
code span.im {
} /* Import */
code span.in {
  color: var(--accent3);
  font-weight: bold;
} /* Information */
code span.kw {
  color: var(--shade7);
} /* Keyword */
code span.op {
  color: var(--accent7);
  font-weight: bold;
} /* Operator */
code span.ot {
} /* Other */
code span.pp {
  color: var(--accent1);
  font-weight: bold;
} /* Preprocessor */
code span.sc {
  color: var(--accent0);
} /* SpecialChar */
code span.ss {
  color: var(--accent0);
} /* SpecialString */
code span.st {
  color: var(--accent5);
} /* String */
code span.va {
} /* Variable */
code span.vs {
  color: var(--accent2);
} /* VerbatimString */
code span.wa {
  color: var(--accent0);
  font-weight: bold;
} /* Warning */

/*********************************************
 * other looks for the codapi 
 *********************************************/
codapi-toolbar button,
codapi-output a[href="#close"] {
  color: var(--shade2);
  background-color: var(--shade6);
  font-size: var(--font-size-small);
  border-radius: 10px;
}

/* make the run button and the close link look and behave the same  */
codapi-toolbar button:hover,
codapi-output a[href="#close"]:hover {
  color: var(--shade6);
  background-color: var(--shade2);
  font-size: var(--font-size-small);
  border-radius: 10px;
}

div.live-code div.label {
  font-weight: var(--header-font-weight);
  color: var(--accent1);
  font-size: var(--font-size-small);
  padding: 0.2em 0.4em;
  margin: 0;
  top: 0.4em;
  right: 4.5em;
  position: absolute;
  pointer-events: none;
}

/*********************************************
 * uniform citations after blocks or pages  
 *********************************************/

.cite-block {
  font-size: var(--font-size-small);
  text-align: right;
}

.cite-page {
  font-size: var(--font-size-small);
  text-align: right;
  position: absolute;
  bottom: 0;
  /* this one leaves some space to the page UI, 
   should be adopted to some sort of overall
   page layout definition which includes headers,
   footers and non printing areas (for GUI elements)*/
  right: 5vw;
}

/* The footnotes should be at the same position as page citations and have the 
 same font size   */
.footnotes {
  font-size: var(--font-size-small);
  text-align: left;
  position: absolute;
  bottom: 0;
}

/* The popup boxes specified and changed so
  that they adhere to our style boxes */

div.block[popup] {
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  border-width: 0px 0px 0px 20px;
  background-color: var(--shade1);
  color: var(--shade7);
}

ul li ul li {
  list-style-type: disc; /* Different bullet for nested list */
}

/* Increase or decrease control size 
    Using this for live demonstration 
    during the HCI Lecture to show its
    impact on the Chrome Lighthouse
    accessibility inspector */
/* .reveal .controls {
   font-size: 4rem; 
 } */

/* Blockquotes */

.reveal q,
.reveal blockquote {
  quotes: none;
}

.reveal blockquote {
  display: block;
  text-align: left;
  font-size: 0.9em;
  position: relative;
  width: 80%;
  margin: 20px auto;
  padding: 15px 15px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  /* box-shadow: 0px 0px 2px rgba(0, 0, 0, 1); */
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline block;
}