/* hide slide numbers for VoiceThreads */

.remark-slide-number { display: none; }

.tiny {
  font-size: 0.4rem;
}
.small {
  font-size: 0.7rem;
}
.comfortable {
  font-size: 1.0rem;
}
.large {
  font-size: 1.8rem;
}
.white-pre {
  white-space: pre;
}
h2, h3, h4 {
  margin: 5px 0;
}
.small-code .remark-code {
  font-size: 0.5rem;
}
.floating-source {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(255,255,255,.75);
  font-size: 1rem;
}
.remark-slide table {
  font-size: 0.8rem;
}
.larger-table table {
  font-size: 1.0rem;
}
.smaller-table table {
  font-size: 0.6rem;
}
.tiny-table table {
  font-size: 0.2rem;
}
.pagedtable-wrapper {
  font-size: 0.8rem;
}
.pagedtable-header-type {
  font-size: 0.5rem;
}
.question {
  border-left: 5px solid #005A7F;
  padding: 5px;
  margin: 10px;
  background-color: #F3CD00;
}
.question p {
  margin: 5px;
}
.scripture {
  max-width: 90%;
  margin: 10px auto;
}
.scripture .remark-code {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.3rem;
}
.scripture .ref {
  display: block;
  margin-top: 1rem;
  text-align: right;
}
.col2 {
  columns: 2;
}

/* overflow */
.pull-left, .pull-right {
  /*overflow-x: auto;*/
}

/* Automatically size images. This one took a while to figure out! */
.autosize .pull-left, .autosize .pull-right, .autosize .autocontent {
    height: 600px; /* TODO: fix default height */
    /* overflow-y: hidden; */
    display: flex;
    flex-flow: column;
    /* justify-content: center; */
}

.autosize .pull-left > *, .autosize .pull-right > *, .autosize .autocontent > * {
    flex: 1;
    min-height: 50px; /* need to set this otherwise min-height is determined by content, so it won't scale. */
}

img, video, iframe {
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
  text-align: center;
}

.autosize img {
  height: 100%; /* the container gets the right height; the image just needs to fill it. */
}

.autoremainder {
    display: flex;
    flex-flow: column;
    max-height: 600px;
}

.autoremainder > * {
    flex: 0;
}

.remaining-height {
    flex: 1;
    min-height: 50px;
}