User:Kuzupyon2/kuzutester3.css

/***** RESET THIS SHIT *****/ .story-wrapper *, .story-wrapper *::before, .story-wrapper *::after { box-sizing: border-box; } .story-wrapper * { margin: 0; padding: 0; font: inherit; } .story-wrapper { --color-story-header-background: ; --color-story-black: 0 0 0; --color-story-white: 255 255 255; --color-secondary-gold-rgb: 191 158 93; --story-spacing: 0.7em; --story-radius: 10px; --ainana-magic-number-1: 7px; --ainana-magic-number-2: 17px; --fs-story-xl: clamp(2rem, 3vw + 1rem, 2.5rem); --fs-story-lg: clamp(1.5rem, 2vw + 1rem, 2rem); --fs-base: 1rem; --story-max-width: min(100% - calc(var(--story-spacing) * 2), 60rem); } sup.reference { position: relative; top: -0.5em; vertical-align: baseline; font-size: 75%; line-height: 0; }

/***** General *****/ .story-transcript-wrapper { /* margin-bottom: calc(var(--story-spacing) * 3); */ font-size: var(--fs-base); /*line-height:;*/ } .story-img-wrapper-withtitle, .story-img-wrapper-inline, .story-subsection-title, .line-tpo { max-width: var(--story-max-width); margin-inline: auto; margin-top: var(--story-spacing); text-align: center; outline: 1px solid red; }

/***** Titles *****/ .story-title, .story-subsection-title { font-family: inherit; }

.story-title { font-size: var(--fs-story-xl); }

.story-subsection-title { font-size: var(--fs-story-lg); }

/***** Line Containers *****/ .line-container { display: flex; gap: var(--story-spacing); max-width: var(--story-max-width); margin-top: var(--story-spacing); margin-inline: auto; /*border: 1px solid blue;*/ /* word-break: keep-all; */ }

.line-container+.lc-blank-speaker { margin-top: 0; padding-top: 0; }

.chara-name, .sfx-name { flex: 0 1 24%; padding-block: var(--ainana-magic-number-2); text-align: right; text-wrap: balance; }

.chara-name b:not(:empty)::after { content: ":" }

.chara-name b, .chara-name b:not(:empty)::after, .sfx-name { font-weight: bold; }

.chara-dialogue, .sfx-sound { flex: 1 0 76%; padding: var(--ainana-magic-number-2) var(--story-spacing); border-left-width: 5px; border-left-style: solid; }

.line-container+.lc-blank-speaker .chara-dialogue, .line-container+.lc-blank-speaker .sfx-sound { padding-top: 0; } /***** Images *****/ .story-img-wrapper-withtitle img, .story-img-wrapper-inline img { display: block; max-width: 100%; height: auto; }

[class*="polyptych"] { display: grid; gap: 0; justify-items: center; }

.polyptych-2 { grid-template-columns: 1fr 1fr; }

.polyptych-3 { grid-template-columns: 1fr 1fr 1fr; }

.polyptych-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }