/*## These styles are located here for easy retrieval in JS ##*/

.slide {
  box-sizing: border-box;
  height: 210mm;
  padding: 30px;
  width: 297mm; /* Size of landscape A4 paper */
  font-size: 30px;
  transform-origin: 0 0;
  margin-bottom: 30px;
}
.absolute-slide {
  border: none !important;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  visibility: visible;
}
.absolute-slide .clicked-image {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/*## Presentation controller ##*/

#presentCont { margin: 0.5em 0.5em 0.5em 0; }
#presentCont > span { font-size: 1.4em; }
/* Presenting mode */
#presentCont { display: initial; }

/*## Slide ##*/

.centered-slide { display: flex; flex-direction: column; }
.centered-slide.centered { margin-left: 0; margin-right: 0; }
.centered-slide > * { flex: 1; }

/*### Slide > * ###*/

.slide img:not(.clicked-image) {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  /* width: auto; */
}

.slide > *:first-child, .slide > div:only-child > *:first-child,
.slide > ul:first-child > li:first-child > *:first-child,
.slide > div:only-child > ul:first-child > li:first-child > *:first-child,
.slide > ol:first-child > li:first-child > *:first-child,
.slide > div:only-child > ol:first-child > li:first-child > *:first-child
{
  margin-top: 0;
}

.slide:not(.absolute-slide) img { pointer-events: none; }
.slide td { font: inherit; }
.slide ul, .slide ol { padding-inline-start: 40px; margin: 0; }
.slide .svg          { max-height: 1em !important; }
.slide h2, .slide h3, .slide h4, .slide h5, .slide h6 {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0.5em;
}
.slide .h-anchor, .slide .gap, .slide .gap-small { display: none; }

.slide pre > code { font-size: 0.9em; }

/*### Slide > centered, width ###*/

.centered,
.centered  .width5per, .centered .width10per, .centered .width15per, .centered .width20per,
.centered .width25per, .centered .width30per, .centered .width35per, .centered .width40per,
.centered .width45per, .centered .width50per, .centered .width55per, .centered .width60per,
.centered .width65per, .centered .width70per, .centered .width75per, .centered .width80per,
.centered .width85per, .centered .width90per, .centered .width95per
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.width5per  { width:  5%; }
.width10per { width: 10%; }
.width15per { width: 15%; }
.width20per { width: 20%; }
.width25per { width: 25%; }
.width30per { width: 30%; }
.width35per { width: 35%; }
.width40per { width: 40%; }
.width45per { width: 45%; }
.width50per { width: 50%; }
.width55per { width: 55%; }
.width60per { width: 60%; }
.width65per { width: 65%; }
.width70per { width: 70%; }
.width75per { width: 75%; }
.width80per { width: 80%; }
.width85per { width: 85%; }
.width90per { width: 90%; }
.width95per { width: 95%; }

/*### Slide > float-right ###*/

.float-right { float: right; text-align: right; }
* + .float-right { margin-left: 1em; }

/*### Slide > layout table ###*/

.layout-table {
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
}
.layout-table > .layout-row {
  display: table-row;
}
.layout-row > * {
  display: table-cell;
  border: none;
  padding: 0.1em;
  vertical-align: middle;
}
.layout-row li { margin-left: 30px; }
.fixed-layout { table-layout: fixed; }

/*### Slide > font, br ###*/

.font18 { font-size: 18px; }
.font20 { font-size: 20px; }
.font22 { font-size: 22px; }
.font25 { font-size: 25px; }
.font27 { font-size: 27px; }
.font35 { font-size: 35px; }

.br1 { padding: 0.5em; }
.br2 { padding: 1.0em; }
.br3 { padding: 1.5em; }
.br4 { padding: 2.0em; }
.br5 { padding: 2.5em; }
.br6 { padding: 3.0em; }
.br7 { padding: 3.5em; }
.br8 { padding: 4.0em; }
.br9 { padding: 4.5em; }

/*## Presenting ##*/

.invisible { visibility: hidden; }
.no-overflow { overflow: hidden; }
.body-bg-color { background-color: var(--bg-color); }

.absolute-cont {
  bottom: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  transition: opacity 0.5s linear 0s;
  visibility: visible;
  z-index: 10;
  font-size: 1.2em;
}
.absolute-cont:hover { opacity: 0.4; }
/* In case your browser doesn't support :hover */
.absolute-cont:not(:hover) { opacity: 0; }
#slideIndex { border: none; font-size: 1.6em; }

.absolute-slide .invisible-present { visibility: hidden !important; }

/*## Media specific stylings ##*/

@media screen {
  .slide {
      border: 1px solid var(--fg-color);
    }
}

@media print {
  /* The contents of this rule are inserted from presentation.js
   * because we need to do changes to non-presentation elements
   * (like article or #pagenav) when the current page is trully
   * a presentation, while presentation.css is inserted in every
   * page.
   */
}