/* styles.css */

/* Make elements with class 'scrollable' scroll vertically with a max height */
.scrollable {
  max-height: 75vh;        /* max height relative to viewport height */
  overflow-y: auto;        /* vertical scrollbar if content overflows */
  padding-right: 1em;      /* space so scrollbar doesn't overlap content */
  box-sizing: border-box;  /* include padding in height */
}

/* Center content inside scrollable container and limit max width */
.scrollable > * {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Make plots (images, SVGs, canvas) scale responsively inside scrollable */
.scrollable img,
.scrollable svg,
.scrollable canvas {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Make images, SVGs, and canvas scale responsively on all slides */
.reveal .slides section img,
.reveal .slides section svg,
.reveal .slides section canvas {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Improve appearance of scrollbar on WebKit browsers */
.scrollable::-webkit-scrollbar {
  width: 10px;
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.5);
  border-radius: 10px;
}