*, *::after, *::before {
	box-sizing: border-box;
	user-select: none;
}

body {
	font-family: Arial;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	height: var(--height);
	margin: 0;
	padding: 0;
	overflow: scroll;
}
h4 {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 200;
	text-align: center;
	font-size: 1.85rem;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}
h5 {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 200;
	text-align: center;
	font-size: 1.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
a {
	text-decoration: none;
	color: black;
}
#about a {
	color: #aaa;
}
#about a:hover {
	color: #69b6d1;
}
#header {
	background-color: white;
	text-align: center;
	font-size: 200%;
	font-weight: bold;
	padding: 12px 0;
	border-bottom: 1px solid #ccc;
	font-family: "Gentium Book Basic", "Times New Roman", Times, serif;
	width: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
}
#header > a, #header > a:hover {
	color: black;
}
#aboutIcon, #statsIcon {
	position: absolute;
	top: 12px;
	cursor: pointer;
}
#statsIcon {
	right: 0;
	margin: 0 8px 8px 4px;
}
#aboutIcon {
	left: 0;
	margin: 4px 4px 8px 12px;
}

#Ytail {
	height: 24px;
	top: 10px;
	position: relative;
}
#text {
	flex-grow: 1;
	flex-basis: auto;
	position: relative;

	width: 100vw;
	max-width: 600px;
	max-height: 45vh;
	min-height: 200px;

	margin: auto;
	overflow: scroll;
	background-color: white;
	z-index: 10;
	transition: height 0.5s;
}
#text.gameOver {
	max-height: none;
	flex-basis: auto;
}
#keepReading {
	display: none;
}
#keepReading.active {
	display: block;
	text-align: center;
	font-family: "Gentium Book Basic", "Times New Roman", Times, serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 0.9rem;
	color: #aaa;
	cursor: pointer;
	padding-bottom: 2rem;
}
#keepReading.active > a {
	color: #aaa;
}
#keepReading.active:hover, #keepReading.active > a:hover {
	color: #555;
}
#chapters {
	border-top: 1px solid #555;
	max-width: 1200px;
	flex-shrink: 5;
	flex-basis: 40vh;
	overflow: scroll;
	background-color: #aaa;
	z-index: 10;
	margin: 0 auto;
	transition: flex-basis 1s ease-in-out 1s;
}
#chapterGrid {
	border-bottom: 1px solid white;
	height: calc(100% - 2.6rem);
	overflow: scroll;
	background-color: white;
	position: relative;
}
#chapters.gameOver {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 2.6rem;
	height: 0;
	border-top: 1px solid #555;
}
	#preview {
		text-indent: 1.75rem;
		width: 100%;
		padding: 0.5em 2em 2em 2em;
		overflow: scroll;
		font-family: "Gentium Book Basic", "Times New Roman", Times, serif;
		text-align: justify;
		font-size: 0.95rem;
		line-height: 1.5;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	#preview > .word {
		-webkit-hyphens: manual;
		-ms-hyphens: manual;
		hyphens: manual;
		font-weight: bold;
		color: red;
	}
	.leftBranch > .word, .rightBranch > .word {
		color: black;
		background-color: black;
		transition: background-color 0.5s;
	}
	.word.i, .punct.i {
		font-style: italic;
	}
	.leftBranch.shown > .word, .rightBranch.shown > .word {
		background-color: transparent;
	}
	#answer {
		border: 1px solid #555;
		background: white;
		padding: 0.5em;
		font-family: "Gentium Book Basic", "Times New Roman", Times, serif;
		margin: 1em 2em;
		transition: opacity 1s;
		position: sticky;
		top: 0;
	}
	#answer.won {
		border: 1px solid #5a5;
	}
	#answer.lost {
		border: 1px solid #a55;
	}
	#answerChNum {
		text-align: center;
		font-size: 80%;
		text-transform: uppercase;
		padding-top: 0.25em;
		letter-spacing: 1px;
	}
	#answerChTitle {
		text-align: center;
		font-style: italic;
		padding: 0 0.5em;
	}

.hidden {
	opacity: 0;
}

.chapter {
	font-family: 'Pragati Narrow', sans-serif;
	position: relative;
	float: left;
	padding: 0;
	height: 2.6rem;
	cursor: pointer;
	user-select: none;
	background-color: #ddd;
	color: #222;
	width: calc((100% - (0.15rem * 2 * 3)) / 3);
	overflow: hidden;
	border: 1px dotted #555;
	margin: 0.15rem;
	display: flex;
	transition: height 1s ease-out 0.75s, border 1s ease-out 0.75s, margin 1s ease-out 0.75s, background-color 1s ease-out;
}
.chapter.wrong {
	height: 0;
	border: none;
	color: white;
	margin: 1px 0.15rem;
	background-color: white;
	opacity: 0.5;
	padding: 0;
}
.chapter.guessed {
	margin: 0;
	z-index: 50;
	background-color: #888;
	pointer-events: none;
}
.chapter.guessed > .chnum {
	background-color: #aaa;
}
.chapter.correct {
	color: white;
	background-color: #5a5;
	pointer-events: none;
}
.chapter.correct > .chnum {
	background-color: white;
}
.chapter.guessed.correct {
	border: 2px solid #5a5;
}

.chtitle {
	font-size: 1rem;
	line-height: 1.1;
	font-weight: 400;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	letter-spacing: -0.25px;

	text-align: left;
	border: none;
	padding: 3px 5px;
	cursor: pointer;
	text-overflow: ellipsis;
	flex-basis: 87%;
	flex-shrink: 1;
	flex-grow: 1;
}
.chapter.correct > .chtitle {
	color: white;
}


.chnum {
	color: black;
	font-size: 0.9rem;
	padding-left: 2px;
	padding-right: 2px;
	font-weight: 275;
	height: 100%;
	background-color: white;
	flex-basis: 23%;
}
.chnum:not(#epilogue) {
	content: attr(data-chapter);
}

#guessSpacers {
	position: fixed;
	height: 2.6rem;
	width: 100%;
	top: calc(var(--height) - 2.6rem);
	left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.guessSpacer {
	min-width: 1em;
	flex-grow: 1;
	background-color: white;
	border: 1px dashed #aaa;
}
.guessSpacer:first-of-type {
	border-left: 2px solid white;
}
.guessSpacer:last-of-type {
	border-right: 2px solid white;
}

.guess1, .guess2, .guess3, .guess4, .guess5, .guess6 {
	width: calc(16.666% - 4px);
}
.guess1 {
	animation: guess1 1s ease-in-out forwards;
	z-index: 80 !important;
}
@keyframes guess1 {
	100% {
		top: var(--height);
		left: 2px;
		transform: translateY(-100%);
	}
}
.guess2 {
	animation: guess2 1s ease-in-out forwards;
	z-index: 81 !important;
}
@keyframes guess2 {
	100% {
		left: calc(16.666% + 2px);
		top: var(--height);
		transform: translateY(-100%);
	}
}
.guess3 {
	animation: guess3 1s ease-in-out forwards;
	z-index: 82 !important;
}
@keyframes guess3 {
	100% {
		left: calc(33.333% + 2px);
		top: var(--height);
		transform: translateY(-100%);
	}
}
.guess4 {
	animation: guess4 1s ease-in-out forwards;
	z-index: 83 !important;
}
@keyframes guess4 {
	100% {
		left: calc(50% + 2px);
		top: var(--height);
		transform: translateY(-100%);
	}
}
.guess5 {
	animation: guess5 1s ease-in-out forwards;
	z-index: 84 !important;
}
@keyframes guess5 {
	100% {
		left: calc(66.666% + 2px);
		top: var(--height);
		transform: translateY(-100%);
	}
}
.guess6 {
	animation: guess6 1s ease-in-out forwards;
	z-index: 85 !important;
}
@keyframes guess6 {
	100% {
		left: calc(83.333% + 2px);
		top: var(--height);
		transform: translateY(-100%);
	}
}

/* Media queries for guess animation */
@media screen and (min-width: 800px) {
	@keyframes guess1 {
		100% {
			left: 0;
			top: 100vh;
			transform: translateY(-100%);
		}
	}
	@keyframes guess2 {
		100% {
			left: 16.666%;
			top: 100vh;
			transform: translateY(-100%);
		}
	}
	@keyframes guess3 {
		100% {
			left: 33.333%;
			top: 100vh;
			transform: translateY(-100%);
		}
	}
	@keyframes guess4 {
		100% {
			left: 50%;
			top: 100vh;
			transform: translateY(-100%);
		}
	}
	@keyframes guess5 {
		100% {
			left: 66.666%;
			top: 100vh;
			transform: translateY(-100%);
		}
	}
	@keyframes guess6 {
		100% {
			left: 83.333%;
			top: 100vh;
			transform: translateY(-100%);
		}
	}

}

#stats, #about {
	position: fixed;
	top: 25vh;
	height: 55vh;
	min-height: 425px;
	left: 50vw;
	width: 90vw;
	max-width: 400px;
	transform: translateX(-50%);

	box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	background-color: white;
	z-index: 1;
	padding: 1.5rem;
	overflow: scroll;

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 200;
	font-size: 0.8rem;
	opacity: 0;
	transition: opacity 0.25s;
}
#about > p {
	font-weight: 275;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 1rem;
	line-height: 1.25;
}
.closeButton {
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	padding: 0 0.75rem;
	font-size: 3rem;
	cursor: pointer;
}
.closeButton:hover {
	background-color: #eee;
}

#stats.active {
	opacity: 1;
	z-index: 90;
}
#about.active {
	opacity: 1;
	z-index: 95;
}

#bigStats {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	padding: 1rem 0 2rem 0;
}
#bigStats > div {
	font-size: 2rem;
	text-align: center;
}
#bigStats > div::after {
	display: block;
	font-size: 0.8rem;
}
#gameCount::after {
	content: 'played';
}
#winPercent::after {
	content: 'win %';
}
#currentStreak::after {
	content: 'current streak';
}
#bars {
	clear: both;
}
.barContainer {
	clear: both;
	padding-top: 5px;
}

.barLabel {
	float: left;
	width: 5%;
	text-align: right;
	padding-right: 3px;
	margin-top: 1px;
}
.bar {
	float: left;
	min-width: 1em;
	text-align: right;
	font-weight: 400;
	color: white;
	background-color: #999;
	padding: 1px 3px;
}
.bar.thisGame {
	background-color: #5a5;
	border-left: 1px solid #5a5;
}
#statsFooter {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	padding-top: 2rem;
}
#countdown, #share {
	font-size: 2rem;
	text-align: center;
}
#share {
	display: none;
	cursor: pointer;
}
#share.active {
	display: block;
}
#countdown::before {
	display: block;
	font-size: 0.8rem;
	content: 'next Dordle';
}

.alert-container-center {
	position: fixed;
	top: 18vh;
	left: 50vw;
	width: 75vw;
	max-width: 650px;
	transform: translateX(-50%);
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.alert-container-left {
	position: fixed;
	top: 65vh;
	max-width: 50vh;
	left: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.alert-container-right {
	position: fixed;
	top: 65vh;
	max-width: 50vw;
	right: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.alert {
	pointer-events: none;
	font-family: "Gentium Book Basic", "Times New Roman", Times, serif;
	text-align: center;
	background-color: #222;
	color: white;
	padding: 0.75rem;
	border-radius: 0.25rem;
	opacity: 0.95;
	transition: opacity 500ms ease-in-out;
	margin-bottom: 0.5rem;
	width: 100%;
	min-width: 10vw;
}
.alert-container-left > .alert {
	border-radius: 0 0.25rem 0.25rem 0;
}
.alert-container-right > .alert {
	border-radius: 0.25rem 0 0 0.25rem ;
}
.alert:last-child {
	margin-bottom: 0;
}

.alert.hide {
	opacity: 0;
}

#animatedWhale {
	display: none;
}

#animatedWhale.playing {
	display: block;
	width: 80px;
	position: fixed;
	top: 12vh;
	animation: sail 6s ease-in-out;
	z-index: 75;
	left: -120px;
}
#animatedWhale.playingReverse {
	display: block;
	width: 80px;
	position: fixed;
	top: 12vh;
	transform: rotateY(180deg);
	animation: sail 6s ease-in-out reverse;
	z-index: 75;
	left: -120px;
}

@keyframes sail {
	0% {
		left: calc(100% + 80px);
	}
	10% {
		top: 13vh;
	}
	20% {
		top: 12vh;
	}
	30% {
		top: 13vh;
	}
	40% {
		left: 53%;
		top: 12vh;
	}
	50% {
		top: 13vh;
	}
	60% {
		top: 12vh;
	}
	70% {
		left: 50%;
		top: 13vh;
	}
	80% {
		top: 12vh;
	}
	90% {
		top: 13vh;
	}
	100% {
		left: -120px;
		top: 12vh;
	}
}


@media screen and (min-width: 800px) {
	body {
		height: 100vh;
	}
	#about {
		top: 20vh;
		height: 65vh;
	}
	#about > p {
		font-size: 1.15rem;
	}
	#preview {
		padding: 0.5em 3em 2em 3em;

	}
	#chapters {
		border-top: none;
		border-bottom: none;
	}
	#chapters.gameOver {
		border-top: none;
	}
	.chnum {
		font-size: 1.1rem;
		padding-left: 5px;
		padding-right: 5px;
	}
	.chtitle {
		padding: 3px 5px;
	}
	.chapter {
		width: calc((100% - (0.15rem * 2 * 5)) / 5);
	}
	.chapter.guessed {
		width: calc((100% / 5) - 1px);
		height: calc(2.6rem - 2px);
	}
	#animatedWhale.playing {
		animation: sail 9s ease-in-out;
	}
	#animatedWhale.playingReverse {
		animation: sail 9s ease-in-out reverse;
	}
}

@media screen and (min-width: 1000px) {
	.chapter {
		width: calc((100% - (0.15rem * 2 * 6)) / 6);
	}
	.chapter.guessed {
		width: calc((100% / 6) - 1px);
	}
}