/* ui elements */
:root {
    --font-display: "Cinzel", serif;
    --font-body: "Crimson Pro", serif;
    --font-type: "Special Elite", system-ui, monospace;
    --font-whimsical: "Princess Sofia", cursive;
    --font-ui: "Oswald", sans-serif;
    --font-flourish: "Sevillana", cursive;
    --font-spooky: "Griffy", cursive;
    /* optional accent */
    --font-rough: "Girassol", cursive;
    /* optional accent */
    --font-swash: "Jim Nightshade", cursive;
    /* optional accent */
    --font-blackletter: "Pirata One", serif;
    /* ultra-sparingly */
    --paper-url: url("../imgs/parchment1.png");
    --ink-color: #2b1d12;
    /* dark brown ink */
    --paper-edge: #d9c9a6;
    --paper-bg: #efe3c4;
    --output-min-height: 20em;
    --gold: rgb(175, 160, 71);
}

html,
body {
    background: #1a1318;
}

html {
    height: 100%;
    width: 100%;
}

/* UI (outside the container) */
body {
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: .01em;
    color: white;
}

/* Story container defaults */
#container .msg {
    font-family: var(--font-body);
    font-size: 1.35em;
    line-height: 1.85;
    letter-spacing: .005em;
}

/* UI Styles */
select,
button {
    border: none;
    background: none;
    color: #b4b7bf;
    opacity: 0.58;
    font-size: 0.98em;
    padding: 0.12em 0.44em;
    border-radius: 2px;
}

.loader-glow {
    position: relative;
    display: inline-block;
}

#loadBtn {
    width: 80px;
    height: 22px;
    font-size: 0.93em;
    /* try 0.82em if still too big */
    padding: 0.15em 0.4em;
    /* horizontal padding only */
    line-height: 1.15;
    /* keep text vertically centered */
    box-sizing: border-box;
    border-radius: 5px;
    background: #1a1b22;
    color: #ffe066;
    border: none;
    outline: none;
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: hidden;
    /* prevent spill */
}

.loader-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 72px;
    /* adjust as needed: button width + margin */
    height: 30px;
    /* set to your new height */
}

.glow-border {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.glow-outline {
    fill: none;
    stroke: #fff4;
    stroke-width: 1.6;
}

.glow-chase {
    fill: none;
    stroke: url(#glowGradient);
    stroke-width: 2;
    filter: blur(1.2px) brightness(1.11);
    stroke-linecap: round;
    stroke-dasharray: 36 100;
    /* Glow segment/gap: tune to taste! */
    stroke-dashoffset: 0;
    animation: border-chase 1.1s linear infinite;
}

@keyframes border-chase {
    to {
        stroke-dashoffset: -136;
        /* Set to perimeter: 2*(85+21)=212 minus corners, but 136 looks smooth for this arc */
    }
}

.typewriter-char {
    opacity: 0;
    display: inline-block;
    animation: fade-in-char 0.18s ease forwards;
    white-space: pre;
}

@keyframes fade-in-char {
    from {
        opacity: 0;
        transform: translateY(0.24em) scale(0.93);
    }

    55% {
        opacity: 0.65;
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.typewriter-cursor {
    display: inline-block;
    width: 0.9ch;
    height: 1.08em;
    color: #58525e;
    background: #2a272b;
    border-radius: 1px;
    margin-left: 1px;
    vertical-align: middle;
    animation: hammer-cursor 0.18s cubic-bezier(.9, -0.7, .7, 1.7) infinite alternate;
    opacity: 0.85;
}

@keyframes hammer-cursor {
    0% {
        transform: translateX(0) scaleY(1);
    }

    40% {
        transform: translateX(-1.5px) scaleY(1.12);
    }

    60% {
        transform: translateX(-3.5px) scaleY(0.94);
    }

    100% {
        transform: translateX(0.5px) scaleY(1.02);
    }
}


@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Prevent mid-word breaks during typing */
.typewriter-word {
    display: inline-block;
    white-space: pre;
}

/* Chars can be plain inline; word container prevents intra-word breaks */
.typewriter-char {
    display: inline;
    white-space: pre;
}

#container.rewind {
    animation: rewind-spin 0.54s cubic-bezier(.68, -0.6, .41, 1.6);
}

@keyframes rewind-spin {
    0% {
        transform: rotate(0deg) scale(1);
        filter: blur(0px);
    }

    90% {
        transform: rotate(-330deg) scale(0.98);
        filter: blur(3px);
    }

    100% {
        transform: rotate(-360deg) scale(1);
        filter: blur(0px);
    }
}

menu,
h3,
#thatsawrap>*:not(#container) {
    font-family: var(--font-ui);
    font-size: 0.97rem;
    color: #b3b4b8;
    letter-spacing: 0.008em;
}

#menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    gap: 0.7em;
    font-family: var(--font-ui);
    margin: 0 auto 1.6em auto;
    /* margin: 1em auto 1.2em auto;
            max-width: 700px; */
}

#storyName {
    width: 36em;
    text-align: center;
    font-size: 1.5em;
    color: #ffe6ae;
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    font-weight: 400;
    /* don't exceed 400 wt with cinzel; it uggo */
    opacity: 0.89;
    padding: 0 0.2em;
    white-space: nowrap;
}

#description {
    margin: 0 auto 1.3em auto;
    max-width: 720px;
    padding: 0.4em auto 0.4em auto;
    color: #fee8b3;
    font-size: 1.08em;
    font-family: var(--font-ui);
    font-style: italic;
    opacity: 0.93;
    background: none;
    text-align: center;
}

.desc {
    font-size: .9em;
    opacity: 0.89;
    font-family: var(--font-ui);
    font-style: italic;
    text-align: center;
    /* max-width: 90%; */
}

#prevBtn,
#nextBtn {
    padding: 0.2em 1em;
    font-size: 1.22em;
    border-radius: 22px;
    /* background: #232333; */
    color: #d6d2d2;
    border: none;
    opacity: 0.64;
    /* transition: background 0.17s, opacity 0.17s; */
    z-index: 1;
}

#prevBtn:active,
#nextBtn:active,
#prevBtn:focus,
#nextBtn:focus {
    /* background: #282844; */
    opacity: 1;
}

#output,
#container {
    scrollbar-color: #292c35 #181a20;
    scrollbar-width: thin;
    background-color: transparent;
    z-index: 1;
}

/* For Chrome, Edge, Safari */
#output::-webkit-scrollbar,
#container::-webkit-scrollbar {
    width: 8px;
    background: #181a20;
}

#output::-webkit-scrollbar-thumb,
#container::-webkit-scrollbar-thumb {
    background: #292c35;
    border-radius: 10px;
    min-height: 22px;
    border: 2px solid #181a20;
}

#output::-webkit-scrollbar-thumb:hover,
#container::-webkit-scrollbar-thumb:hover {
    background: #32343c;
}

#output::-webkit-scrollbar-corner,
#container::-webkit-scrollbar-corner {
    background: #181a20;
}

#container {
    /* background: #22232b; */
    border-radius: 18px;
    box-shadow: 0 4px 28px #000a;
    padding: 2em 2.2em 3em 2.2em;
    min-height: 20em;
    max-height: 24em;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 0;
    max-width: 820px;
    margin: 10px 0;
    z-index: 2;
    /* overflow-x: hidden;
    overflow-y: scroll;  */

    /* let's give it a gold frame, tho */
    border: 3px solid transparent;
    border-radius: 8px;
    background-image: linear-gradient(var(--bg-color), var(--bg-color)),
        linear-gradient(45deg, #FFD700, #E6BE8A, #FFD700);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

h1 {
    font-family: "Rubik Doodle Shadow", system-ui;
}

h2 {
    font-family: "Spectral SC", serif;
    font-weight: 600;
    font-style: italic;
}

h3 {
    font-weight: 200;
}

h3,
p {
    font-size: 0.93em;
    font-family: var(--font-ui);
    color: #9597a2;
    margin: 0.5em 0 0.2em 0;
    opacity: 0.67;
    font-style: italic;
}

/* story styling */
.title-screen {
    opacity: 0;
    transition: opacity 0.6s ease;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}

.title-screen.visible {
    opacity: 1;
}

.title-screen.hidden {
    opacity: 0;
}

.title-screen.fin-screen {
    font-style: italic;
    letter-spacing: 0.12em;
}

/* Titles & headings */
.title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 3.4em;
    color: #ffffff;
    text-align: center;
    margin-top: 0.3em;
    margin-bottom: 0.1em;
    letter-spacing: 0.07em;
    text-shadow: 0 2px 12px #000a, 0 1px 0 #fff8;
}

.msg {
    margin-bottom: 1.6em;
    line-height: 1.86;
    font-size: 1.42em;
    white-space: pre-wrap;
    letter-spacing: 0.015em;
}

.msg.letter,
.note {
    position: relative;
    max-width: 520px;
    margin: 1.2em auto;
    /* center in the output column */
    padding: 1.15em 1.25em 1.2em;
    border-radius: 10px;
    line-height: 1.6;
    background:
        /* texture */
        var(--paper-url),
        /* warm fallback if texture fails */
        linear-gradient(#f3e7c9, #eadcb7);
    background-size: cover;
    background-blend-mode: multiply;
    color: var(--ink-color);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, .28),
        inset 0 0 1.2px rgba(0, 0, 0, .25);
    border: 1px solid rgba(87, 63, 34, .25);
    transform: rotate(-0.15deg);
    /* tiny organic tilt */
    font-family: var(--font-flourish, "Sevillana", cursive);
    font-size: 1.08em;
}

/* faint deckled edge / vignette */
.msg.letter::before,
.note::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .18);
    pointer-events: none;
}

/* light crease/old-paper grain overlay */
.msg.letter::after,
.note::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background:
        repeating-linear-gradient(180deg,
            rgba(50, 30, 10, .05) 0px,
            rgba(50, 30, 10, .05) 1px,
            transparent 22px,
            transparent 24px);
    mix-blend-mode: multiply;
    opacity: .35;
    pointer-events: none;
}

/* optional header/signature helpers inside the note */
.note-header {
    font-family: var(--font-display, "Cinzel", serif);
    font-size: .95em;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(30, 18, 8, .75);
    margin-bottom: .6em;
}

.note-body {
    white-space: pre-wrap;
}

.note-sig {
    margin-top: .8em;
    text-align: right;
    font-family: var(--font-flourish, "Sevillana", cursive);
    font-size: 1.15em;
}

/* tiny “torn tape” accents (optional; remove if you don’t want them) */
.msg.letter .tape,
.note .tape {
    position: absolute;
    width: 72px;
    height: 16px;
    left: 16px;
    top: -8px;
    background: linear-gradient(180deg, #f7f0d6, #e6dcbc);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
    transform: rotate(-3deg);
    opacity: .9;
}

.msg.letter .tape.r,
.note .tape.r {
    left: auto;
    right: 16px;
    transform: rotate(3deg);
}

/* if you prefer a neater handwriting look (swap class .letter-neat) */
.msg.letter-neat {
    font-family: "Jim Nightshade", var(--font-flourish, cursive);
    font-size: 1.05em;
    letter-spacing: .01em;
}

/* if the container is dark, keep shadows crisp */
#output .msg.letter,
#output .note {
    backdrop-filter: saturate(105%);
}

/* Character Styles */
.narrator {
    font-family: var(--font-body);
    font-style: italic;
    letter-spacing: .01em;
}

.dialogue {
    color: #7dd8fd;
    font-weight: 600;
    font-size: 1.12em;
    letter-spacing: .01em;
    font-family: var(--font-body);
}

.dialogue-patriotic-lite {
    color: #7dd8fd;
    /* start with your base sky blue */
    font-weight: 600;
    font-size: 1.12em;
    letter-spacing: .01em;
    font-family: var(--font-body);
    background: linear-gradient(90deg,
            #7dd8fd 0%,
            #ffffff 50%,
            #ff4f4f 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: background 1.5s ease;
}

.dialogue-patriotic {
    font-weight: 600;
    font-size: 1.12em;
    letter-spacing: .01em;
    font-family: var(--font-body);
    background: linear-gradient(90deg,
            #ff2b2b 0%,
            #ffffff 33%,
            #246bff 66%,
            #ff2b2b 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: patriotic-flow 3.5s linear infinite;
    text-shadow:
        0 1px 8px rgba(255, 255, 255, 0.4),
        0 1px 14px rgba(255, 43, 43, 0.4),
        0 1px 14px rgba(36, 107, 255, 0.4);
}

@keyframes patriotic-flow {
    to {
        background-position: 200% center;
    }
}

.writer {
    font-family: var(--font-type);
    font-size: 1.15em;
    letter-spacing: .01em;
    color: #cfe8ff;
}

.editor {
    font-family: var(--font-type);
    font-style: italic;
    color: #fd6d6d;
    font-size: 1.08em;
}

/* Villain / intense voice (keep small + spaced for legibility) */
.vildialogue {
    font-family: var(--font-spooky);
    color: #ff2b2b;
    /* keep if you still want the red sting */
}

/* If you really want a “baroque” aside: */
.morningstar {
    font-family: var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* .morningstar {
     font-family: "Jim Nightshade", cursive;
     font-size: 1.17em;
 } */

.bubba,
.bigguy {
    font-family: var(--font-rough);
    font-size: 1.14em;
    letter-spacing: .01em;
}

.msg.bubba,
.msg.bigguy {
    font-family: var(--font-rough);
    color: rgb(57, 187, 170);
    font-size: 1.14em;
    letter-spacing: .01em;
}

/* Innkeeper */
.msg.innkeeper {
    font-family: var(--font-type);
    font-size: 1.08em;
    letter-spacing: .01em;
}

.princess,
.cathy {
    font-family: var(--font-flourish);
    color: pink;
    font-size: 1.12em;
    letter-spacing: .02em;
}

/* Princess / Cathy */
.msg.princess,
.msg.cathy {
    font-family: var(--font-flourish);
    font-size: 1.12em;
    letter-spacing: .02em;
}

.boomer {
    font-family: var(--font-rough);
    font-weight: 700;
    font-size: 1.12em;
}

.mammy {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .01em;
}

.editor {
    font-family: 'Griffy', cursive;
    font-style: italic;
    color: #fd6d6d;
    font-size: 1.11em;
}

/* Musical moments */
.montage {
    font-family: var(--font-flourish);
    font-size: 1.18em;
    letter-spacing: .04em;
    color: #c071d8;
    font-style: italic;
    text-shadow: 0 1px 12px #fff18a99, 0 1px 10px #d5b90044;

    display: inline-block;
    /* required for transform */
    white-space: nowrap;
    /* marquee is single-line */
    will-change: transform;

    /* speed is configurable via CSS var */
    animation: montage-marquee var(--montage-speed, 22s) linear infinite;
}

/* motion */
@keyframes montage-marquee {
  /* Start fully to the right of the viewport */
  from { transform: translateX(100vw); }
  /* End fully to the left of the viewport, past its own width */
  to   { transform: translateX(calc(-100% - 100vw)); }
}

/* respect users who reduce motion */
@media (prefers-reduced-motion: reduce) {
  .montage { animation: none; transform: none; }
}

.musical,
.musicalchar {
    font-family: var(--font-flourish);
    font-size: 1.18em;
    letter-spacing: .04em;
    color: #ffe066;
    font-style: italic;
    animation: bounce-song 0.92s cubic-bezier(.5, -0.2, .6, 1.3) infinite alternate;
    white-space: pre-line;
    text-shadow: 0 1px 12px #fff18a99, 0 1px 10px #d5b90044;
}

@keyframes bounce-song {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-5px) scale(1.03);
    }

    40% {
        transform: translateY(-8px) scale(1.08);
    }

    60% {
        transform: translateY(-5px) scale(1.04);
    }

    80% {
        transform: translateY(-3px) scale(0.99);
    }

    100% {
        transform: translateY(0);
    }
}

/* Patriotic musical moments */
.musical-patriotic,
.musicalchar-patriotic {
    font-family: var(--font-flourish);
    font-size: 1.18em;
    letter-spacing: .04em;
    background: linear-gradient(90deg,
            #ff2b2b 0%,
            #ffffff 33%,
            #246bff 66%,
            #ff2b2b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    animation:
        bounce-song 0.92s cubic-bezier(.5, -0.2, .6, 1.3) infinite alternate,
        patriotic-flow 3s linear infinite;
    white-space: pre-line;
    text-shadow:
        0 1px 10px rgba(255, 255, 255, 0.6),
        0 1px 18px rgba(255, 43, 43, 0.5),
        0 1px 18px rgba(36, 107, 255, 0.5);
}

@keyframes patriotic-flow {
    to {
        background-position: 200% center;
    }
}

.jubilee {
    font-family: var(--font-flourish);
    font-weight: 600;
    letter-spacing: .03em;
    background: linear-gradient(90deg, #ff26a3 6%, #fffd5c 22%, #46f884 43%, #3df2ff 67%, #c466ff 82%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rainbow-flow 3.8s linear infinite;
    font-weight: 700;
    letter-spacing: 0.03em;
    filter: drop-shadow(0 0 2px #24242466);
}

@keyframes rainbow-flow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 120% 50%;
    }
}

.sadjubilee {
    font-family: var(--font-swash);
    font-weight: 400;
    letter-spacing: .01em;
    color: #c9c4d1;
    background: linear-gradient(90deg, #b38ca0 6%, #d6d1a3 22%, #a3c9a3 43%, #a3c3c9 67%, #b8a3c9 82%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rainbow-flow-muted 6s linear infinite;
    letter-spacing: 0.03em;
    filter: drop-shadow(0 0 1px #00000033);
    opacity: 0.75;
}

@keyframes rainbow-flow-muted {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.revision{
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-size: 1.8em;       /* large enough to disrupt normal flow */
  color: #e61919;         /* vivid red */
  line-height: 1;         /* keeps it tight for mid-sentence */
  display: inline-block;  /* lets transforms apply cleanly */
  transform: rotate(-2deg); /* slight tilt for handwritten feel */
  vertical-align: baseline;
}

.shaky {
  font-size: 1.8em;
  color: #eee;
  text-align: center;
  filter: blur(0);
  animation: shakeBlur 6s ease-in-out forwards;
  animation-delay: 2s;
  display: inline-block;
  transition: transform 0.2s;
}

@keyframes shakeBlur {
  0% {
    transform: none;
    filter: blur(0);
  }
  30% {
    transform: translate(0.5px, -0.5px) rotate(0.2deg);
    filter: blur(0.5px);
  }
  50% {
    transform: translate(-1px, 1px) rotate(-0.4deg);
    filter: blur(1px);
  }
  70% {
    transform: translate(1.5px, -1.5px) rotate(0.6deg);
    filter: blur(1.5px);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
    filter: blur(2px);
  }
}

.cloudburst-container {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin: 2em auto;
}

.cloudburst {
  font-size: 1.6em;
  color: #eee;
  position: relative;
  display: inline-block;
}

.burst-text::before,
.burst-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #eee;
  opacity: 0.05;
  filter: blur(1px);
  transform-origin: center;
  animation: burstSpread 2s ease-out infinite;
}

.burst-text::after {
  animation-delay: 1s;
}

@keyframes burstSpread {
  0% {
    transform: scale(1) rotate(0deg) translate(0, 0);
    opacity: 0.2;
  }
  40% {
    transform: scale(1.2) rotate(15deg) translate(-2px, -2px);
    opacity: 0.15;
  }
  70% {
    transform: scale(1.5) rotate(-25deg) translate(4px, 4px);
    opacity: 0.1;
  }
  100% {
    transform: scale(2.2) rotate(45deg) translate(0px, 0px);
    opacity: 0;
  }
}

.pink {
    color: pink;
}


/* Ensure #container can grow tall enough for the paragraph */
#container {
    min-height: 20em;
    /* keep */
    height: auto;
    /* grow to fit paragraph + padding */
    max-height: none;
    /* remove cap so paragraph isn't clipped */
    width: 100%;
}

/* Limit paragraph width a bit for readability */
#output>.msg {
    max-width: 62ch;
    margin: 0;
    /* we center via flex, not margins */
}

#chapters {
    display: none;
    align-items: center;
    background-color: rgba(35, 35, 51, 0.6);
    opacity: 0.7;
    padding: .6em 2.5em 0.6em 2.5em;
    border-radius: 6px;
    width:auto;
    height:auto;
}

/* Chapter header text (your border already set) */
#chapterheader {
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #e9dfb2;
    font: 400 .96em var(--font-display, "Cinzel", serif);
    text-align: center;
    padding: 1em 0 1em 0;
    /* more space below the border */
    border-bottom: 2px solid rgb(175, 160, 71);
}

/* Active chapter button */
.chapter-btn.is-active {
    background: #2a2c3d !important;
    border-color: #e4c766 !important;
    color: #ffe8b3 !important;
    opacity: 1 !important;
}

#chapterswrapper {
    margin: 1em 0 0 0;
    padding: 1em 0 1em 0;
}

#container .msg.scenename {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 2em;
    color: #bb87ff;
    text-align: center;
    margin-top: 1.6em;
    margin-bottom: 0.7em;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 10px #4446;
}

#thatsawrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

#centerCol {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Arrows | container | arrows */
#readerRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* ~10px gutter next to container */
    width: 100%;
}

/* Arrow containers */
#leftCol,
#rightCol {
    font-size: xx-large;
    color: var(--gold);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: .65;
    transition: transform .08s ease, opacity .18s ease;
    user-select: none;
}

#leftCol:hover,
#rightCol:hover {
    opacity: .95;
    transform: scale(1.05);
}

#leftCol:active,
#rightCol:active {
    transform: scale(0.98);
    opacity: 1;
}

#leftCol img,
#rightCol img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

#footer {
    border-top: 1px solid var(--gold);
    padding: .6em 0 .6em 0;
    align-items: center;
    width: 100%;
    background-color: black;
    opacity: 0.96;
    height:100%;
}

#output {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    height: auto;
    max-height: none;
    padding: 0;
    --output-min-height: 20em;
    min-height: var(--output-min-height);
    width: 100%;
    /* for the montage, let's see if this breaks anything... :-0 */
    overflow: hidden;
}

/* Mobile tweaks */
@media (max-width:600px) {
    :root {
        --output-min-height: 70vh;
    }

    #container {
        margin: 10px 0;
    }
}