.comic-image {
    width: 100%;
}

/*#comic-page {*/
/*    margin-bottom: 20px;*/
/*}*/

/*#click-for-overlay, #open-image, #open-image-window {*/
/*    cursor: zoom-in;*/
/*}*/

/*#comic-page-overlay {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-color: rgba(0, 0, 0, 0.5);*/
/*    cursor: zoom-out;*/
/*}*/

/*#comic-overlay-image {*/
/*    margin: 1rem;*/
/*    max-width: calc(100% - 2rem);*/
/*    height: calc(100% - 2rem);*/
/*    object-fit: contain;*/
/*}*/

/*.navigation-bar {*/
/*    display: flex;*/
/*    margin: 0 auto 20px auto;*/
/*    font-weight: bold;*/
/*    justify-content: center;*/
/*}*/

/*.navigation-button, .navigation-button-disabled {*/
/*    padding: 0 20px;*/
/*    white-space: nowrap;*/
/*}*/

/*#post-title {*/
/*    margin-top: 5px;*/
/*    margin-bottom: 10px;*/
/*}*/

#post-body {
    margin: 0 0 3em 0;
    font-size: 1.1em;
}

#post-body :before {
    content: "꧁🙟 ";
    padding-right: .2em;
}

#post-body :after {
    content: " 🙜꧂";
    padding-left: .2em;
}

/*#post-date {*/
/*    margin-top: 1em;*/
/*    margin-bottom: 0.25em;*/
/*}*/

/*#post-body-break {*/
/*    margin: 1em 0;*/
/*}*/

/*!* Transcripts *!*/

#transcripts-container {
    border: none;
}

#transcript-panel {
    text-align: left;
    border: none;
}

/* Smooth transition animation for opening and closing the transcriptions panel */
summary {
    display: flex; /* This hides the summary's ::marker pseudo-element */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 10px;
    width: 100%;
    text-align: center;
}

summary {
    display: flex; /* Important for some browsers to have this separate */
}

summary::-webkit-details-marker {
 display: none; /* This also hides the ::marker pseudo-element, but in Safari */
}

summary:before {
  content: '';
  flex: 0 0 auto;
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--main-accent-color);
  transform: rotate(0);
  transform-origin: 25% 50%;
  transition: .25s transform ease;
}

details[open] summary:before {
  transform: rotate(90deg);
}

details + .details-body {
    display: grid;
    grid-template-rows: 0fr; /* Collapsed */
    transition: grid-template-rows 400ms ease, opacity 300ms ease;
    opacity: 0;
}

.details-inner {
    overflow: hidden; /* hides content when 0fr */
}

details {
    max-width: 100%;
    overflow: hidden; /* Prevents an odd blue outline around the element in Safari. */
}

details[open] + .details-body {
    grid-template-rows: 1fr; /* Expanded */
    opacity: 1;
}

.details-inner > * {
  transform: translateY(-6px);
  transition: transform 300ms ease;
}
details[open] + .details-body .details-inner > * { transform: translateY(0); }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .details-body { transition: none; }
}

/*.transcript {*/
/*    display: none;*/
/*}*/

/*#language-list {*/
/*    vertical-align: top;*/
/*    padding: 10px;*/
/*}*/

/*#language-select {*/
/*    width: 100%;*/
/*}*/