/* Text */

body {
	font-size: 20px;
	line-height: 1.45;
	font-weight: 400;
	font-family: Georgia, "Times New Roman", Times, serif;
}

a {
	color: #20908e;
}

::selection {
	background: #fcdb3f;
	color: #2f290c;
}

article {
	height: 100%;
	-webkit-overflow-scrolling: touch;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	margin: 0 auto;
	max-width: 30em;
	padding: 2em 1em 10em;
	position: relative;
}

h1,
h2,
h3 {
	font-weight: normal;
	letter-spacing: 2px;
}

h1 {
	text-align: center;
	font-size: 130%;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin: 2em;
}

article h2 {
	text-align: center;
	margin: 2em;
	font-size: 100%;
	text-transform: uppercase;
}

article h1,
article h2,
article h3 {
	margin: 10rem 0;
}

.chapter-number {
	opacity: 0.5;
	font-size: 60%;
	padding-bottom: 1em;
	display: block;
}

.small-caps {
	font-size: smaller;
	text-transform: uppercase;
}

p:nth-child(2):first-letter {
	float: left;
	font-size: 4em;
	line-height: 85%;
	padding-right: 5px;
}

/* Menu */
.panel {
	display: flex;
	align-items: center;
	justify-content: center;
}

.button {
	height: 1em;
	opacity: 0.5;
	margin: 0.5em;
	cursor: pointer;
}

.button:hover {
	opacity: 1;
}

/* Audiobook */

.audiobook-mode p {
	opacity: 0.5;
	cursor: pointer;
}

p.current-paragraph {
	opacity: 1;
}

.js-button-pause {
	display: none;
}

.playing .js-button-pause {
	display: block;
}

.playing .js-button-play {
	display: none;
}

.audiobook-controls .button {
	height: 2em;
	width: 2em;
	margin: 2em;
}

.audiobook-controls {
	display: none;
	opacity: 0;
	transition: opacity 0.3s;

	background-color: hsla(0, 0%, 100%, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(5px);
	backdrop-filter: saturate(180%) blur(5px);

	width: 100%;
	position: fixed;
	bottom: 0;

	box-shadow: rgb(0 0 0 / 10%) 0px 1em 3em 1em;
}

.audiobook-mode .audiobook-controls {
	display: flex;
	opacity: 1;
	transition: opacity 0.3s;
}

/* Media Queries */

@media (max-width: 800px) {
	.controls {
		opacity: 1;
	}
}

/* Dark theme */

body.dark-theme {
	background-color: black;
	color: white;
}

.dark-theme img {
	filter: invert(1);
}

.dark-theme img.cover-image {
	filter: none;
}

.dark-theme .audiobook-controls {
	background-color: hsla(0, 0%, 0%, 0.8);
}

@media (prefers-color-scheme: dark) {
	.js-toggle-theme {
		display: none;
	}

	body {
		background-color: black;
		color: white;
	}

	img {
		filter: invert(1);
	}

	img.cover-image {
		filter: none;
	}

	.audiobook-controls {
		background-color: hsla(0, 0%, 0%, 0.8);
	}
}

@media print {
	@page {
		margin: 2cm;
		margin-bottom: 3cm;
	}

	header,
	nav {
		display: none !important;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	img {
		page-break-inside: avoid;
		page-break-after: avoid;
	}

	a {
		page-break-inside: avoid;
	}

	table,
	pre,
	ul,
	ol,
	dl {
		page-break-before: avoid;
	}

	body:before {
		content: "George S. Clason – Najbohatší muž v Babylone";
		color: #777 !important;
		font-size: 1em;
		padding-top: 30px;
		text-align: center !important;
	}

	body.dark-theme {
		background-color: white;
		color: black;
	}

	.dark-theme img {
		filter: invert(0);
	}
}

/* Homepage */
.homepage .controls {
	height: 1em;
	opacity: 0.5;
	cursor: pointer;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
	padding: 1em;
}

.column div {
	margin-bottom: 1em;
	max-width: 75%;
}

.cover {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cover-image {
	max-width: 50%;
	will-change: transform;

	transform-origin: 0 50%;
	transform: rotate(0) scale(1);
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
	box-shadow: 0px 1.4px 2.2px rgba(0, 0, 0, 0.056), 0px 3.3px 5.3px rgba(0, 0, 0, 0.081), 0px 6.3px 10px rgba(0, 0, 0, 0.1), 0px 11.2px 17.9px rgba(0, 0, 0, 0.119), 0px 20.9px 33.4px rgba(0, 0, 0, 0.144), 0px 50px 80px rgba(0, 0, 0, 0.2);
}

.cover-image:hover {
	/* transform: rotate3d(0, 1, -1, 1deg) scale(1.08);
	box-shadow: 0px 1.4px 2.2px rgba(0, 0, 0, 0.028), 0px 3.3px 5.3px rgba(0, 0, 0, 0.04), 0px 6.3px 10px rgba(0, 0, 0, 0.05), 0px 11.2px 17.9px rgba(0, 0, 0, 0.06), 0px 20.9px 33.4px rgba(0, 0, 0, 0.072), 0px 50px 80px rgba(0, 0, 0, 0.1); */
	box-shadow: 0px 1.4px 2.2px rgba(0, 0, 0, 0.028), 0px 3.3px 5.3px rgba(0, 0, 0, 0.04), 0px 6.3px 10px rgba(0, 0, 0, 0.05), 0px 11.2px 17.9px rgba(0, 0, 0, 0.06), 0px 20.9px 33.4px rgba(0, 0, 0, 0.144), 0px 50px 80px rgba(0, 0, 0, 0.2);
	transform: perspective(1500px) rotateY(-25deg);
}

@media (max-width: 800px) {
	.row {
		flex-direction: column;
	}
}