/* Slide viewer shared by every presentation on nadiababajic.com. The slides are pictures (the same ones that
   are inside the PowerPoint file), so a presentation looks exactly the same here, in PowerPoint and in Google Slides. */
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo-2.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1E0616;color:#FFE1EE;font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{overflow:hidden}
.deck{position:fixed;left:0;right:0;top:0;bottom:60px;display:grid;place-items:center;padding:10px}
.stage{position:relative;width:min(100%,calc((100vh - 80px) * 16 / 9));width:min(100%,calc((100dvh - 80px) * 16 / 9));aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#3A0D29;box-shadow:0 30px 80px -20px rgba(255,61,146,.45)}
.s{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.s.on{opacity:1;visibility:visible}
.zone{position:absolute;top:0;bottom:0;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.zone.prev{left:0;width:30%;cursor:w-resize}
.zone.next{right:0;width:70%;cursor:e-resize}
.zone:focus-visible{outline:4px solid #FF6DAE;outline-offset:-4px}

.bar{position:fixed;left:0;right:0;bottom:0;height:60px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;
  background:rgba(30,6,22,.92);border-top:1px solid rgba(255,156,199,.25)}
.bb{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 14px;border-radius:999px;
  border:2px solid rgba(255,156,199,.4);background:rgba(255,255,255,.08);color:#FFE1EE;font:inherit;font-size:14px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.bb:hover{background:rgba(255,61,146,.35);border-color:#FF6DAE}
.bb:focus-visible{outline:3px solid #FF6DAE;outline-offset:3px}
.bb svg{width:18px;height:18px;flex:none}
.home{margin-right:auto;border:0;background:none;padding:0 6px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:24px;color:#FF6DAE}
.home:hover{background:none;color:#fff}
.count{min-width:74px;text-align:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.dl{margin-left:auto;background:#FF3D92;border-color:#FF3D92;color:#fff}
.dl:hover{background:#E61E78;border-color:#E61E78}
.prog{position:fixed;left:0;right:0;bottom:60px;height:4px;background:rgba(255,156,199,.18)}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF9CC7,#FF3D92);transition:width .25s ease}

/* Full screen: only the slide. The bar comes back for a moment when the mouse moves. */
.fs .deck{bottom:0;padding:0}
.fs .stage{width:min(100vw,calc(100vh * 16 / 9));border-radius:0;box-shadow:none}
.fs .bar{opacity:0;pointer-events:none;transition:opacity .3s ease}
.fs.awake .bar{opacity:1;pointer-events:auto}
.fs .prog{bottom:0}

/* Without JavaScript: every slide, one under another. */
.no-js body{overflow:auto}
.no-js .deck{position:static;display:block;padding:10px 10px 80px}
.no-js .stage{width:auto;aspect-ratio:auto;background:none;box-shadow:none}
.no-js .s{position:static;opacity:1;visibility:visible;height:auto;margin-bottom:12px;border-radius:14px}
.no-js .zone,.no-js .count,.no-js #prev,.no-js #next,.no-js #full,.no-js .prog{display:none}

@media (max-width:640px){
  .dl span,.full-label{display:none}
  .bar{gap:6px;padding:0 8px}
  .bb{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){.s,.prog i{transition:none}}