@import url('https://fonts.googleapis.com/css2?family=Cousine&family=Crimson+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

h1, h2, h3, h4, h5, h6, #text, #hits {
	font-family: 'Crimson Pro', serif !important;
}
h1 {
	font-size: 30px !important;
}
.w3-select {
	font-size: 14px;
	border-bottom: none !important;
}
h1 > a {
	text-decoration: none;
}
body {
	font-family: 'Roboto', sans-serif !important;
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}
header {
	font-size: 0.85em;
	text-transform: lowercase;
	padding-left: 8px !important;
	padding-right: 8px !important;
	text-align: left;
}

#logo {
	background-color: rgba(241, 241, 241, 0.7) !important;
	border-bottom: 1px solid #ccc;
	line-height: 1;
	padding: 8px;
	text-align: center;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
}
/* CAPTCHA NOTICE */
.grecaptcha-badge { visibility: hidden; }
#recaptchaBoilerplate {
	position: absolute;
	bottom: 8px;
	left: 8px;
	font-size: 0.5rem;
	color: #bbb;
	letter-spacing: -0.4px;
	text-align: center;
	max-width: 120px;
}

#logo > h1 {
	margin: 0 8px;
}
#advancedSettingsButton {
	position: absolute;
	bottom: 8px;
	right: 8px;
}

.setting.container.hidden {
	opacity: 0;
	pointer-events: none;
}
.linesetting.hidden {
	display: none;
}
#advancedSettings {
	max-height: 300px;
	overflow-y: auto;
	transition: max-height 0.5s ease-in-out;
	display: block;	/* needed to override the generic .hidden display: none */
}
#advancedSettings.hidden {
	max-height: 0;
	display: block; /* needed to override the generic .hidden display: none */
}
#advancedSettingsLeft {
	opacity: 0.3;
	pointer-events: none;
}
.hidden {
	display: none;
}

.w3-modal.active {
	display: block;
}

button {
	font-size: 0.8rem !important;
}

.setting[data-input="strictness"] > header {
	padding: 0 8px;
}
[data-input="buttons"] {
	padding: 0 4px;
}
[data-input="buttons"] .w3-col {
	padding: 4px;
}
[data-input='buttons'] button {
	padding: 8px;
	width: 100%;
}
.setting[data-input='minIncipScores'], .setting[data-input='minTermScores'] {
	padding: 8px 4px;
}
.setting[data-input='couplets'] .switch {
	margin: 6px;
}
#syncope,
.setting[data-input='internalEnjambment'] {
	background-color: #e2e2e2 !important;
}
.setting[data-input='multipleSpeakers'] > .settings-label,
.setting[data-input='intralineParagraphBreak'] > .settings-label {
	max-width: 8em;
	margin: auto;
}
.settings-label {
	font-size: 0.75rem;
	line-height: 1.2em;
	cursor: pointer;
}
#syncope > div > .setting,
.setting[data-input='multipleSpeakers'],
.setting[data-input='intralineParagraphBreak'] {
	padding: 4px;
}
#consecutivesDisplay {
	padding: 0px 4px;
	background-color: #bbb;
	color: black;
}
#contentOverlay {
	background-color: black;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 81;
	opacity: 0.5;
	display: none;
}
#content {
	max-width: 1200px;
	width: 100%;
	padding-left: 16px;
	padding-right: 16px;	
	margin: auto;
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* The badge showing the author and title when the settings menu is closed */
#authorAndTitle {
	position: fixed;
	left: 16px;
	top: 47px;
	width: 300px;
	max-width: calc(100% - 16px);
	background-color: rgba(255,255,255,0.7);
	z-index: 75;
}
@media only screen and (min-width: 1200px) {
	#authorAndTitle {
		left: calc(16px + (100vw - 1200px) / 2);
	}
}


/* Settings */

#settings {
	flex-shrink: 0;
	flex-grow: 0;
	width: 100%;
	max-width: 1200px;
	z-index: 85;
	background-color: white;
	max-height: calc(90vh - 60px);
	overflow: scroll;
	margin: auto;
}
#basicSettings > div:not(:last-child) {
	border-right: 1px solid #ccc;
}
#basicSettings > div {
	transition: opacity 0.5s ease-in-out;
}
#basicSettings > div.hidden {
	opacity: 0;
	pointer-events: none;
	display: block;
}

.mobileSliderLabel {
	font-size: 0.7rem;
	color: #555;
	text-align: center;
	padding: 8px 8px 0 0;
}
.enjambmentSlider::before, .enjambmentSlider::after, #minLineScore::before, #minLineScore::after {
	font-size: 0.7rem;
	line-height: 0.75rem;
	letter-spacing: -0.5px;
	font-style: italic;
	white-space: pre;
	text-shadow: 0.5px -0.5px 0px white;
	color: #555;
}
.caption > div {
	font-size: 0.7rem;
	line-height: 0.75rem;
	letter-spacing: -0.5px;
	font-style: italic;
	white-space: inherit;
	color: #555;
}
.caption > div:last-of-type {
	text-align: right;
}

.enjambmentSlider::before, .enjambmentSlider::after, #minLineScore::before, #minLineScore::after {
	position: absolute;
}

.enjambmentSlider::before {
	top: 22px;
	content: "enjambed";
	left: 0;
}
.enjambmentSlider::after {
	top: 22px;
	content: "end-stopped";
	right: 0;
	text-align: right;
}
.caption {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 8px 8px 8px;
}

@media only screen and (max-width: 992px) {
	#basicSettings > div.hidden {
		display: none;		
	}
	.enjambmentSlider::before, .enjambmentSlider::after, #minLineScore::before, #minLineScore::after {
		white-space: inherit;
	}
	.enjambmentSlider::before, .enjambmentSlider::after, #minLineScore::before, #minLineScore::after {
		text-align: right;
	}
}

/* MODALS */
.w3-modal {
	padding-top: 150px !important;
	z-index: 99 !important;
}
#EnSyncopeDiscussion > div > div, #familiarElisionDiscussion > div > div, #enunciatedEdDiscussion > div > div, #obscureElisionDiscussion > div > div, #epenthesisDiscussion > div > div, #syncopeOnContentWordsDiscussion > div > div {
	padding: 16px;
	text-align: left;
}
.settingsExamples {
	padding: 0 0 0 1.5em;
	margin: 0;
	width: max-content;
	max-width: 100%;
}
.settingsExamples > .quotation {
	padding: 0;
	margin: 0;
}
.settingsExamples > .attribution {
	padding: 0;
	margin: 0 0 1em 0;
	text-align: right;
}

#textAndHits {
	flex-shrink: 1;
	flex-direction: row;
	display: none;
	gap: 2em;
	overflow: hidden;
	position: relative;
}
#textAndHits.active {
	display: flex;
}
#text, #hits {
	padding-bottom: 1rem;
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: scroll;
}
#text {
	width: 40%;
}
#hits {
	width: 60%;
}
#loadHitsButton {
	cursor: pointer;
	margin: auto;
	text-align: center;
	width: 3em;
	border-radius: 5px;
	border: 1px solid black;
}
#text > .pRow > p > h:not(.versified), .temp {
	border: 1px dotted #cccc00;
}
#text > .pRow > p > h, .temp {
	cursor: pointer;
	background-color: #ffffcc;
}
canvas {
	height: 200px;	
}
.clusterSibling {
	padding-left: 20px !important;
	border-left: 15px solid #ffffcc !important;
}
.clusterIcon {
	position: absolute;
	right: 15px;
	bottom: 0;
	color: #555;
	padding-bottom: 10px;
}
.activeSegment {
	border-left: 5px solid rgba(39, 160, 230, 0.2);
	padding-left: 5px;
}


/* STATS PANE */
#stats {
	width: 100%;
	overflow: scroll;
	position: relative;
	flex-shrink: 3;
	min-height: 200px;
	display: flex;
	flex-direction: row;
}
#stats.hidden {
	display: none;
}
#segmentStats {
	height: 100%;
	width: 80%;
}
#speakerStats {
	display: none;
}
#speakerStats.active {
	height: 100%;
	width: 20%;
	display: block;
}
#speakerCharts {
	width: 100%;
	height: calc(100% - 40px);
}
#speakerChartControl {
	height: 40px;
	width: 100%;
}
#maxSpeakers {
	height: 5px;
}
#speakerCharts > div {
	height: 33%;
	width: 100%;
}
.yaxislayer-above {
	pointer-events: all;
	cursor: pointer;
}
@media only screen and (max-width: 1031px) {
	[data-input="buttons"] .w3-col {
		padding-top: 12px;
	}
}
.switch.inactive {
	cursor: not-allowed;
	opacity: 0.3;
}
.slider.inactive {
	cursor: not-allowed !important;
}
input:disabled {
	cursor: not-allowed;
}
#pointer {
	position: absolute;
	top: 0;
	z-index: 99;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid rgba(200,50,50,0.5);
	transform: translateX(-8px);	/* to center triangle */
}
#pointer.hidden {
	display: none;
}

/* Loading spinner */
.loader {
	display: none;	
	position: absolute;
	left: calc(50% - 30px);
	top: 25%;
	z-index: 99;
}
.loader.active {
	display: block;
	border: 10px solid #f3f3f3; /* Light grey */
	border-top: 10px solid #838383;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

m {
	text-decoration: underline #999 wavy 1px;
}
#text > .textTitle {
	text-align: center;
	letter-spacing: 0.5px;
	font-weight: 800;
	font-size: 1.2rem;
	margin-bottom: 0;
}
#text > .textAuthor {
	margin-top: 0;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 1px;
	font-size: 0.9rem;
}
#text > .textAuthor::before {
	content: 'by ';
	text-transform: none;
	letter-spacing: 1px;
	font-size: 0.9rem;
	font-style: italic;
}

#text > .pRow:first {
	padding-top: 1em;
}
#text > .pRow {
	clear: both;
}
#text > .pRow > p.topmargin {
	padding-top: 1em !important;
}

/* Paragraph types */
#text > .pRow > p.plain {
	text-indent: 1.5em;
	margin-top: 0;
	margin-bottom: 0;
}
.noIndent {
	text-indent: 0 !important;
}
#text > .pRow > p.verse {
	margin-top: 0;
	margin-bottom: 0;
}
#text > .pRow > p.verse:not(.noIndent) {
	padding-left: 1.5em;
	text-indent: -1.5em;
}
#text > .pRow > p.stagedirection {
	margin-top: 0;
	margin-bottom: 0;
	font-style: italic;
}
#text > .pRow > p.attribution {
	margin-top: 0;
	margin-bottom: 0.5em;
	text-align: right;
}
#text > .pRow > p.playscript {
	text-indent: -1em;
	padding-left: 2.5em;
	margin-top: 0;
	margin-bottom: 0;
}
#text > .pRow > p.epigraph {
	margin-top: 0.5em;
	margin-bottom: 0;
	font-style: italic;
}
.playscript > h > .versesInProse {
	clear: both;
	margin-left: -2.5em !important;
}

.scriptSpeaker {
	text-transform: uppercase;
	font-size: 85%;
	margin-top: 0.2em;
	margin-right: 2em;
	letter-spacing: 1px;
	float: left;
}
.scriptSpeaker::after {
	content: ']';
}
.sectiontitle {
	margin-top: 2em;
	margin-bottom: 0;
	padding-bottom: 1em;
	text-align: center;
	font-style: italic;
	letter-spacing: 1px;
	font-weight: 800;
	font-size: 1.2rem;
}
#text > .newChapter {
	margin-top: 1em;
	margin-bottom: 0;
	padding-bottom: 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 0.9rem;
	background-color: #f8f8f8;
	position: -webkit-sticky;
	position: sticky;
	top: -1px;
	z-index: 75;
	max-height: 1.5em;
	overflow: hidden;
	border-top: 1px solid #ccc;
}
.versesInProse {
	background-color: #ffffaa;
	border: 1px dotted #cccc00;
	display: block;
	margin-right: 1.5em;
	margin-left: 0;
	padding-left: 2em;
	text-indent: -0.5em;
}

/* HITS PANE */
#hits > .newChapter {
	background-color: #eee;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	padding: 0 0.3rem;
	position: -webkit-sticky;
	position: sticky;
	top: -1px;
	z-index: 100;
	max-height: 1.5em;
	overflow: hidden;
	border-top: 1px solid #ccc;
}
.hit {
	position: relative;
	padding-top: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid #aaa;
	cursor: pointer;
}
.hit.placeholder {
	
}
.hit.placeholder > .line > .pattern, .hit.placeholder > .line > .text, .hit.placeholder > .line > .syllabification {

}
.hit.placeholder span {
	background-color: #ddd;
	color: #ddd;
}
.hit.active {
	background-color: #ffffaa;
}
.hit > .details {
	position: absolute;
	right: 0;
	top: 0;
	min-width: 60px;
	max-width: 60px;
	text-align: right;
	background-color: #e4ede6;
	opacity: 0.8;
	font-size: 0.7rem;
	padding: 0 4px;
	overflow: hidden;
	z-index: 50;
	max-height: 1.6em;
}
.details:hover {
	max-height: none;
	max-width: 160px;
	background-color: rgba(209, 224, 212, 0.9);
	opacity: 1;
	overflow: visible;
	z-index: 51;
	padding-bottom: 4px;
}
.score {
	font-size: 0.6rem;
	letter-spacing: -0.4px;
	text-align: left;
}
.linedata {
	font-family: 'Cousine', monospace;
	font-size: 0.6rem;
	letter-spacing: 1px;
	color: #666;
	text-align: left;
}
.linedatascore {
	margin-left: 0.75em;
	float: right;
}
.speaker, .chapter, .wordNums, .hitId {
	width: 100%;
	z-index: 52;
	opacity: 0.9;
	font-size: 0.6rem;
	overflow: hidden;
	overflow-wrap: break-word;
	text-overflow: ellipsis;
	white-space: nowrap;
	background-color: rgba(255, 255, 255, 0.9);
	text-align: left;
	border: 1px dotted #888;
}
.speaker > i, .chapter > i, .wordNums > i, .hitId > i {
	padding: 0 3px 0 1px;
	font-size: 0.5rem;
	vertical-align: text-bottom;
}

.line {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	z-index: 50;
}

.pattern {
	flex-basis: 16%;
	font-family: 'Cousine', monospace;
	font-size: 0.7rem;
	letter-spacing: 1.5px;
	color: #999;
	white-space: pre;
}
#togglePattern {
	font-family: 'Cousine', monospace;
	letter-spacing: 1.5px;
}
.text {
	flex-basis: 45%;
	font-size: 0.9rem;
	letter-spacing: -0.1px;
}
.syllabification {
	flex-basis: 39%;
	color: #999;
	font-size: 0.7rem;
	font-style: italic;
}


/* CHECKBOX AS SWITCH-SLIDER */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch.skinny {
  height: 16px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:not(.inactive) {
  cursor: pointer;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider.skinny:before {
  height: 12px;
  width: 16px;
  bottom: 2px;
}
input:checked + .slider {
  background-color: #5b6978;
}
input:focus + .slider {
  box-shadow: 0 0 1px #5b6978;
}
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}
.slider.round:before {
  border-radius: 50%;
}
.slider.round.skinny {
  border-radius: 12px;
}

/* RANGE SLIDER */
.rangeslidecontainer {
  width: 100%; /* Width of the outside container */
  position: relative;
//  padding: 8px 16px 0px 16px;
  padding: 8px;
}
/* The slider itself */
.rangeslider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 10px; /* Specified height */
  border-radius: 5px;
  background: #aaa;
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.rangeslider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  border-radius: 20%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid black;
  cursor: pointer; /* Cursor on hover */
}
.rangeslider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  border-radius: 20%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid black;
  cursor: pointer; /* Cursor on hover */
}

/* Media queries for rangeslider-dependent settings */
@media screen and (min-width: 601px) {
	/* Sliders that connect to the next one (only applicable on 'medium' and 'large' screens) */
	.rangesliderDescenderTopHalf::-webkit-slider-thumb {
	  border-radius: 20% 20% 0 0;
	  border-bottom: none;
	  height: 45px;
	}
	.rangesliderDescenderStart::-webkit-slider-thumb {
	  border-radius: 20% 20% 0 0;
	  border-bottom: none;
	}
	.rangesliderDescenderContinue::-webkit-slider-thumb {
	  height: 64px;
	  border-radius: 0;
	  border-top: none;
	  border-bottom: none;
	}
	.rangesliderDescenderEnd::-webkit-slider-thumb {
	  border-radius: 0 0 20% 20%;
	  border-top: none;
	}
	.rangesliderDescenderBottomHalf::-webkit-slider-thumb {
	  height: 45px;
	  border-radius: 0 0 20% 20%;
	  border-top: none;
	}
	.rangesliderDescenderTopHalf::-moz-slider-thumb {
	  border-radius: 20% 20% 0 0;
	  border-bottom: none;
	  height: 45px;
	}
	.rangesliderDescenderStart::-moz-slider-thumb {
	  border-radius: 20% 20% 0 0;
	  border-bottom: none;
	}
	.rangesliderDescenderContinue::-moz-slider-thumb {
	  height: 53px;
	  border-radius: 0;
	  border-top: none;
	  border-bottom: none;
	}
	.rangesliderDescenderEnd::-moz-slider-thumb {
	  border-radius: 0 0 20% 20%;
	  border-top: none;
	}
	.rangesliderDescenderBottomHalf::-moz-slider-thumb {
	  height: 45px;
	  border-radius: 0 0 20% 20%;
	  border-top: none;
	}
	.lineSettingsCaption {
		word-spacing: 500px;	/* Line break on larger screens */
	}
}
@media screen and (max-width: 600px) {
	#lineSettings > div {
		border-top: 1px solid #555;
	}
	#lineSettings-atStart, #lineSettings-0 {
		border-top: none !important;
	}
	#lineSettings-atStart {
		border-bottom: 1px solid #555;
	}
	.lineSettingsCaption {
		text-transform: uppercase;
		letter-spacing: 2px;
		text-align: left !important;
	}
}

/* "AT LEAST" & "AT MOST" INTERFACE USING		*/
/* TWO-HANDLED "noUiSlider" SLIDER FROM REFRESHLESS.COM */
#atMostSyls:before {
	/* less than or equal to symbol */
	content: '\2264';
}
#atLeastSyls:before {
	/* greater than or equal to symbol */
	content: '\2265';
}
.sylSlider {
	margin: 14.25px 4px;
	height: 10px !important;
}
.sylSlider.disabled {
	visibility: hidden;
}
#lineSettingsHeader {
	padding: 2px 8px;
	color: #333;
	line-height: 0.8rem;
	margin-bottom: 0 !important;
}
#lineSettingsHeader > div > div {
	border-bottom: 1px solid #999;
	border-right: 50px solid transparent;
}
.lineSettingsCaption {
	font-size: 11px;
	color: #555;
	float: left;
	padding: 6px;
	line-height: 12px;
	text-align: center;
	position: relative;
	top: 4px;
}
#lineSettings > div {
	padding-bottom: 6px;
}
.noUi-target {
	border-radius: 10px !important;
	background-color: #bbb !important;
	border: none !important;
	box-shadow: none !important;
}
.noUi-touch-area {
	width: 0px !important;
	height: 0px !important;
}
.noUi-connect {		/* the space between the two handles */
	background-color: #2980b9 !important;
}
.noUi-handle {
	cursor: pointer !important;
	right: -5px !important;
}
.noUi-handle:before, .noUi-handle:after {
	background: none !important;
	position: relative !important;
}
.noUi-tooltip {
	font-size: 10px;
	border: none !important;
	background: rgba(255,255,255,0.9) !important;
	padding: 4px !important;
}

.noUi-handle-lower {	/* "at least" handle */
	width: 0 !important;
	height: 0 !important;
	top: -5px !important;
	background: none !important;
	border-top: 10px solid rgba(255, 255, 255, 0.7) !important;
	border-left: 5px solid transparent !important;
	border-right: 5px solid transparent !important;
	border-bottom: none !important;
	border-radius: 0px !important;
	box-shadow: none !important;
}
.noUi-handle-lower > .noUi-tooltip {		/* "at least" pointer triangle */
	bottom: 8px !important;
	left: -17px !important;
	border-left: 1px solid #999 !important;
	border-right: 1px solid #999 !important;
	border-top: 1px solid #999 !important;
}
.noUi-handle-lower > .noUi-tooltip:before {	/* "at least" tooltip */
	content: 'at least ';
	letter-spacing: -0.3px;
	color: #777;
}

.noUi-handle-upper {	/* "at most" handle */
	width: 0 !important;
	height: 0 !important;
	top: 6px !important;
	background: none !important;
	border-top: none !important;
	border-left: 5px solid transparent !important;
	border-right: 5px solid transparent !important;
	border-bottom: 10px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 0px !important;
	box-shadow: none !important;
}
.noUi-handle-upper > .noUi-tooltip {		/* "at most" pointer triangle */
	bottom: -31px !important;
	left: 17px !important;
	border-left: 1px solid #999 !important;
	border-right: 1px solid #999 !important;
	border-bottom: 1px solid #999 !important;
}
.noUi-handle-upper > .noUi-tooltip:after {	/* "at most" tooltip */
	content: ' at most';
	letter-spacing: -0.3px;
	color: #777;
}

/* Misc media queries */
@media screen and (min-width: 993px) {
	#advancedSettingsLeft {
		padding-right: 4px;
	}
	#advancedSettingsRight {
		padding-left: 4px;
	}
}
@media screen and (max-width: 600px) {
	body {					/* iPhone URL bar problem */
		height: calc(100vh - 90px);
	}
	#hits {
		width: 50%;
	}
	#text {
		width: 50%;
		font-size: 0.9em;
		line-height: 1.5em;
	}
	.hit {
		padding-top: 0.25em;
	}
	.line {
		display: block;
		line-height: 1.15em;
	}
	.line:not(:first-of-type) {
		padding-top: 0.7em;
	}
	.syllabification {
		padding-top: 0.2em;
	}
	#textAndHits {
		gap: 1.5em;
	}
	#text > .newChapter {
		margin-bottom: 0.5em;
	}
}