body {
    background: #f5f5f5;
    color: #164791;
  }

  a {
    color: #0889d1;
    text-decoration-skip: ink;
  }

  html {
    height: 100%;
  }

  body {
    font-family: 'atkinson', -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1;
  }

  body:not(.print-mode) {
    overflow: hidden;
  }

  h1,
  h2,
  h3,
  p {
    margin: 0;
    line-height: 1;
  }

  h2 {
    color: #164791;
  }

  li,
  .nowrap {
    white-space: nowrap;
  }

  * {
    box-sizing: border-box;
  }

  div.slide-container {
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div.slide {
    cursor: pointer;
    cursor: hand;
  }

  div.imageText {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  /* normally not good, but ok in context of full screen directional navigation */
  .talk-mode .slide:focus {
    outline: 0;
  }

  body.talk-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  body.print-mode {
    background: #fff;
    color: #000;
    font-weight: normal;
    padding: 0px;
  }

  body.print-mode div.sub-container {
    padding: 10px 20px;
    display: flex;
    flex-flow: row wrap;
    break-inside: avoid;
  }

.bg {
    color: rebeccapurple;
    /*background: #222;*/
}

svg {
    max-width: 95dvw;
    max-height: 80dvh;
}

blockquote {
  background: white;
  padding: 3.5rem;
  margin: 50px auto;
  width: min(1000px,80vw);
  border: solid 2px rebeccapurple;
  box-shadow: 13px 13px 0 0 white,
              15px 15px 0 0 rebeccapurple,
              15px 11px 0 0 rebeccapurple,
              11px 15px 0 0 rebeccapurple;
}

  blockquote p {
    font-size: clamp(2.44rem, 2.38vw, 3.81rem);
    line-height: 1.4;
  }

  .slide:has(p + ol) strong {
    font-size: clamp(2rem,10dvw,6rem);
  }

  p + ul,
  p + ol {
    font-size: 60%;
    margin-top: 1em;
  }

  blockquote p strong:last-of-type {
    background: lime;
    background-color: #ededed;
    margin-top: 10px;
    padding: 1px 10px 10px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  ul.notes-list {
    display: inline-block;
    vertical-align: top;
  }

  body.print-mode div.slide-container {
    border: 1px solid #000;
  }

  body.jump-mode {
    padding: 10px;
  }

  body.jump-mode div.sub-container {
    display: inline-block;
    vertical-align: top;
    padding: 2px;
  }

  body.jump-mode div.slide-container {
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
  }

  body.jump-mode div.slide-container:hover {
    border: 1px solid rgba(255, 255, 255, 0.8);
  }

  .layout {
    display: grid;
  }

  .layout div {
    display: flex;
    align-items: center;
  }

  img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  div.slide > img:only-child,
  div.slide > canvas:only-child,
  div.slide > video:only-child {
    width: 100%;
  }

  body:not([class*="mode"]) {
    overflow-y: visible;
  }

  body:not([class*="mode"]) > div {
    display: flex;
    align-items: center;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    font-size: 3em;
    position: relative;
  }

  body:not([class*="mode"]) h1,
  body:not([class*="mode"]) h2,
  body:not([class*="mode"]) h3,
  body:not([class*="mode"]) p {
    max-width: 90%;
    word-wrap: anywhere;
  }

  body[class*="mode"] .slide-number {
    font-size: 2rem;
    position: absolute;
    bottom: 30px;
    right: 20px;
  }

  .invisible {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
  }

  body[class*="mode"] .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    height: 20px;
    background-color: rebeccapurple;
  }