code {
  color: #c5e478bb;
  font-size: inherit;
  background-color: rgb(48, 48, 48);
  padding: 0.2rem 0.4rem;
}

li {
  line-height: 1.8em;
}

.blog-post {
  color: #dbdbdbdd;
}

.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5,
.blog-post h6 {
  font-weight: bold;
  color: #dbdbdb;
}

.blog-post h3 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.blog-post h4 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.blog-post,
.blog-header {
  max-width: 900px;
}

.blog-image {
  text-align: center;
}

.blog-image > div {
  margin: auto;
}

.blog-post canvas,
.blog-post img.giffferated,
.blog-index canvas,
.blog-index img.giffferated,
.blog-index img.bordered,
.blog-post img.bordered, .blog-post .bordered {
  border-radius: 5px;
  border: rgba(101, 101, 101, 0.5) 1px solid;
}

.blog-post canvas {
  opacity: .7;
}

.post-header {
  font-size: 1.8rem;
  color: #dcdcaa;
  margin-bottom: 1rem;
}

.post-header a {
  color: inherit;
  font-weight: inherit;
}

.excerpt {
}

.post-link {
  margin-top: 2rem;
  font-size: 18px;
  text-transform: uppercase;
}

.post-divider,
hr.section-divider {
  border-top: 1px solid rgba(204, 204, 204, 0.2);
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}

hr.section-divider {
  margin-top: 2.5rem;
}

.post-image {
  text-align: center;
}

.date,
.time-to-read {
  display: inline-block;
  font-size: 0.85rem;
}

.date {
  color: #ce9178;
  margin-right: 1.6rem;
}

.calendar,
.clock {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
  margin-bottom: 1px;
  margin-right: 1px;
}

.calendar {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ce9178' viewBox='0 0 24 24' %3E%3Cpath fill-rule='evenodd' d='M6.75 0a.75.75 0 01.75.75V3h9V.75a.75.75 0 011.5 0V3h2.75c.966 0 1.75.784 1.75 1.75v16a1.75 1.75 0 01-1.75 1.75H3.25a1.75 1.75 0 01-1.75-1.75v-16C1.5 3.784 2.284 3 3.25 3H6V.75A.75.75 0 016.75 0zm-3.5 4.5a.25.25 0 00-.25.25V8h18V4.75a.25.25 0 00-.25-.25H3.25zM21 9.5H3v11.25c0 .138.112.25.25.25h17.5a.25.25 0 00.25-.25V9.5z'%3E%3C/path%3E%3C/svg%3E")
    no-repeat;
}

.clock {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d7ba7d'%3E%3Cpath d='M12.5 7.25a.75.75 0 00-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 00.744-1.302L12.5 12.315V7.25z'%3E%3C/path%3E%3Cpath fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z'%3E%3C/path%3E%3C/svg%3E")
    no-repeat;
}

.time-to-read {
  color: #d7ba7d;
}

.pagination {
  font-size: 18px;
}

div.gifffer-play-button,
div.gifffer-pause-button {
  background: rgba(95, 176, 80, 0.8);
}

.aspectRatioPlaceholder {
  max-width: auto !important;
  max-height: auto !important;
  text-align: center;
}
.aspectRatioPlaceholder-fill {
  padding-bottom: 0 !important;
}

.aspectRatioPlaceholder {
  display: block;
  margin: auto;
}

.graf--figure,
.blog-image {
  margin-top: 3rem;
  margin-bottom: 3rem !important;
}

.graf--blockquote {
  border-left: rgb(219, 219, 219) 5px solid;
  padding-left: 1.5rem;
  font-size: 18px;
  line-height: 1.8em;
  color: inherit;
  margin-bottom: 1.5rem;
}

.graf--blockquote strong {
  color: inherit;
}

.imageCaption {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 14px;
  color: rgb(153, 153, 153);
}

.oss-header h2 {
  font-size: 1.6rem;
  font-weight: normal;
  margin-right: 2rem;
  line-height: 3.2rem;
}

.oss-header svg {
  max-width: 200px;
}

.highlight {
  color: rgb(255, 213, 92);
}

@media screen and (max-width: 576px) {
  .pagination {
    font-size: 14px;
  }

  .oss-header h2 {
    margin-right: 0;
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 360px) {
  .pagination {
    font-size: 11px;
  }
}