/* literata-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  src: url('../common/fonts/literata/literata-v39-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* literata-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  src: url('../common/fonts/literata/literata-v39-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* literata-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  src: url('../common/fonts/literata/literata-v39-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* literata-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Literata';
  font-style: italic;
  font-weight: 500;
  src: url('../common/fonts/literata/literata-v39-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--text: black;
	--backdrop: white;
	--accent: #005bc4;
	--accent-bright: #359aff;
	--accent-brighter: #52C4FF;
	--accent: #00C43B;
	--accent: #00b035;
	--accent-bright: #08ce44;
	--accent-brighter: #52FF80;
	--inactive: #808080;
	--contrast: #A13203;
	--contrast-faded: #7D3313;
	--red-dark: #005bc4;
	--red-light: #359aff;
	--red-dark: #00b035;
	--red-light: #08ce44;
	--gradient-end: #CC3D00;
	--help-Ukraine: #730800;
	--help-Ukraine-bright: red;
	--animation-play-state: running;
}

body::after {display: none;}

body {
	background-color: rgba(82, 167, 255, 1);
	background: radial-gradient(circle, rgba(82, 167, 255, 1) 30%, rgba(17, 112, 194, 1) 100%);
	background-attachment: fixed;
}

#mobile-open-nav:not(:hover) > img { /*https://codepen.io/sosuke/pen/Pjoqqp*/
	filter: invert(53%) sepia(63%) saturate(6582%) hue-rotate(121deg) brightness(102%) contrast(101%);
}

#contents {
	display: block;
	font-family: 'Literata', 'Alegreya', serif;
	font-size: 12pt;
}

#contents > h2 {
	background-image:linear-gradient(to bottom, var(--red-dark), var(--red-light));
}

#contents > ol {
	counter-reset: chapter-number;
	margin-left: 1rem;
}

#contents > ol > li {
	counter-increment: chapter-number;
	color: var(--inactive);
}

#contents > ol > li:has(a) {color: var(--text);}

#contents > ol > li > a {color: var(--accent);}
#contents > ol > li > a:hover {color: var(--accent-bright);}
#contents > ol > li > a:active {color: var(--accent-brighter);}

#contents > ol > li::marker {
	display: inline-block;
	
	content: 'Ch. ' counter(chapter-number) '.';
	font-style: italic;
}

main {font-family: 'Literata', 'Alegreya', serif;}

hgroup {
	padding-top: 7rem;
	text-wrap: balance;
}

hgroup .title p {
	color: white;
	text-shadow: 0.1rem 0.1rem 0.3rem hsla(0, 20%, 20%, 0.5);
	text-align: center;
	text-indent: 0;
}

.series-name {font-size: 14pt; font-style: italic;}
.book-name {font-size: 20pt; font-weight: 500;}

h1 {
	margin: 4rem auto 2rem;
	/* font-family: 'Literata 24pt', 'Alegreya', serif; */
	font-weight: 400;
	text-indent: 0;
	text-align: center;
	padding-left: 0;
	font-size: 26pt;
	line-height: 1.2;
}

.chapter-number {
	font-size: 26pt;
	font-style: italic;
}

.invisible {display: none;}

.chapter-name {
	font-weight: 500;
	font-size: 36pt;
}

h2 {
	font-size: 25pt;
	margin: 2.5rem auto 0.25rem;
	text-align: left;
	color: white;
	text-shadow: 0.1rem 0.1rem 0.3rem hsla(0, 20%, 20%, 0.5);
	font-weight: 500;
	white-space: nowrap;
	text-fill-color: white;
	-webkit-text-fill-color: white;
}

.bar {
	padding-block: 3rem;
}

.bar + .bar {margin-top: 2rem;}

.bar p, #initial + p {
	max-width: 600px;
	font-size: 12pt;
	hyphens: auto;
	text-wrap: pretty;
}

#initial {margin-left: 65px;}

#initial {					
	border: double 3px var(--accent);
	background: none;
	color: var(--accent);
}

#initial span {
	top: -40%;
	left: 9.5%;
}

@media only screen and (max-width: 850px) {

	#initial {
		margin-left: 0 !important;
	}

}

.prescriptive {font-style: italic;}

.sign {
	text-align: center !important;
	font-weight: 500;
}

.graffiti {
	text-align: center !important;
	font-weight: 500;
	margin-block: 1rem !important;
}

.pokedex {
	border: 1px solid var(--accent);
	margin: 0.5rem auto;
	max-width: 600px;
}

.business-card {
	font-style: italic;
	margin-block: 1rem;
}

.business-card > p {text-align: center !important;}

#pageinfo {
	color: var(--accent);
	font-style: italic;
	margin-top: 1rem;
}

#pageinfo p {text-align: center;}

#pageinfo b {font-weight: 500;}