/* index.css */
body {
  font-family: Arial, Helvetica, sans-serif;
}
img {
  max-width: 100%;
  height: auto;
}
@media print {
  .noprint {
    display: none;
  }
}
.hide {
  display: none;
}
.centered {
  margin: auto;
  text-align: center;
}
.centered-header h1,
.centered-header h2,
.centered-header h3,
.centered-header h4,
.centered-header h5 {
  text-align: center;
}
.videodiv {
    margin: auto;
    max-width: 480px;
}
.ratio-4-3 {
    margin: auto;
    position: relative;
    padding: 75% 0 0 0;
}
.ratio-3-2 {
    margin: auto;
    position: relative;
    padding: 66.667% 0 0 0;
}
.ratio-16-9 {
    margin: auto;
    position: relative;
    padding: 56.25% 0 0 0;
}
.done,
.skip {
  /* padding-left: 0.5em; */
  color: #888888;
  /*
  font-style: italic;
  text-decoration: line-through blue;
  */
}
.done::before {
  content: "[done] ";
}
.skip::before {
  content: "[skip] ";
}
.date {
  color: gray;
}
.date::before {
  content: "(";
}
.date::after {
  content: ")";
}