@import url("https://fonts.googleapis.com/css2?family=Romanesco&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap");

html {
	/*user-select: none;
  -webkit-user-select: none;*/
}

body {
	margin: 0;
	padding: 0;
}

#pdfWrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

#homeWrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: black;
	font-family: "Romanesco", cursive;
}

#buttonWrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	width: 100vw;
	height: 40vh;
	position: fixed;
	bottom: 20vh;
}

.homeButton {
	font-size: 4vw;
	width: 20vw;
	margin: 0 5vw;
}

#guessDay {
	width: 6rem;
}

#guessMonth {
	width: 6rem;
}

#guessYear {
	width: auto;
}

#pdfControlWrapper {
	position: fixed;
	right: 2vw;
	bottom: 2vh;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 6;
}

.pdfControlButton {
	cursor: pointer;
	font-size: 4rem;
	font-family: "Romanesco", cursive;
	width: 12rem;
	height: 7rem;
	padding: 0.2rem 0;
	margin: 0.5rem 0;
	background-color: transparent;
	background-image: url("../img/scroll_full.webp");
	background-size: 100% 100%;
	background-position: center;
	outline: none;
	border: none;
}

.pdfControlButton:focus {
	outline: 3px solid black;
	outline-offset: -1.5rem;
}

#timerScroll {
	font-size: 4rem;
	font-family: "Romanesco", cursive;
	width: 12rem;
	height: 7rem;
	padding: 0.2rem 0;
	margin: 0.5rem 0;
	background-color: transparent;
	background-image: url("../img/scroll_full.webp");
	background-size: 100% 100%;
	background-position: center;
	outline: none;
	border: none;
	text-align: center;
	line-height: 6rem;
}

.newspaperPdf {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

#guessWrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 7;
}

#guessSettingsWrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 7;
}

#guessBox {
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: "Romanesco", cursive;
	position: relative;
	z-index: 8;
}

#settingsBox {
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: "Romanesco", cursive;
	position: relative;
	z-index: 8;
}

@keyframes revealBody {
	0% {
		clip-path: inset(0 50%);
	}
	100% {
		clip-path: inset(0 0);
	}
}

@keyframes unfurlLeft {
	0% {
		left: calc(45% - 2.8rem);
	}
	100% {
		left: -2.8rem;
	}
}

@keyframes unfurlRight {
	0% {
		right: calc(45% - 2.8rem);
	}
	100% {
		right: -2.8rem;
	}
}

@keyframes unfurlSettingsLeft {
	0% {
		left: calc(35% - 2.8rem);
	}
	100% {
		left: -2.8rem;
	}
}

@keyframes unfurlSettingsRight {
	0% {
		right: calc(35% - 2.8rem);
	}
	100% {
		right: -2.8rem;
	}
}

@keyframes unfurlHomeLeft {
	0% {
		left: 35%;
	}
	100% {
		left: -10%;
	}
}

@keyframes unfurlHomeRight {
	0% {
		right: 35%;
	}
	100% {
		right: -10%;
	}
}

#guessContent {
	background-image: url("../img/scroll_body.webp");
	background-position: center;
	background-size: auto 100%;
	z-index: 8;
	padding: 2rem 4rem;
}

#settingsContent {
	background-image: url("../img/scroll_body.webp");
	background-position: center;
	background-size: auto 100%;
	z-index: 8;
	padding: 2rem 15rem;
	font-size: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#doneSettingsButton {
	margin: 0.7rem 0;
	font-size: 6rem;
	font-family: "Romanesco", cursive;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	background-color: transparent;
	outline: none;
	border: none;
}

#doneSettingsButton:focus {
	outline: 3px solid black;
}

#toolbar {
	transform: scale(1.5);
	margin: 0 10%;
}

#cutscenes {
	transform: scale(1.5);
	margin: 0 10%;
}

#scrollLeft {
	height: 140%;
	width: auto;
	position: absolute;
	left: -2.8rem;
	top: -20%;
	z-index: 9;
}

#scrollRight {
	height: 140%;
	width: auto;
	position: absolute;
	right: -2.8rem;
	top: -20%;
	z-index: 9;
}

#guessInputs {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-items: center;
	font-size: 6rem;
	z-index: 10;
}

.guessInput {
	margin: 1rem 2rem;
}

.guessInputValue {
	font-size: 6rem;
	font-family: "Romanesco", cursive;
	text-align: center;
}

#guessButtons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	font-size: 4rem;
	z-index: 10;
}

#cancelGuessButton {
	margin: 0 2rem;
	font-size: 8rem;
	font-family: "Romanesco", cursive;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	background-color: transparent;
	outline: none;
	border: none;
}

#startGameButton {
	font-family: "Romanesco", cursive;
	background-color: transparent;
	outline: none;
	border: none;
	padding: 0.25rem 1.5rem;
	cursor: pointer;
}

#startGameButton:focus {
	outline: 3px solid black;
}

.menuScrollButton {
	font-family: "Romanesco", cursive;
	background-color: transparent;
	outline: none;
	border: none;
	padding: 0.25rem 1.5rem;
	cursor: pointer;
}

.menuScrollButton:focus {
	outline: 3px solid black;
}

#submitGuessButton {
	margin: 0 2rem;
	font-size: 8rem;
	font-family: "Romanesco", cursive;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	background-color: transparent;
	outline: none;
	border: none;
}

#cancelGuessButton:focus {
	outline: 3px solid black;
}

#submitGuessButton:focus {
	outline: 3px solid black;
}

#scoreWrapper {
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100vw;
	height: auto;
	background-image: url("../img/bg_scoring.webp");
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: local;
	overflow-y: scroll;
	overflow-x: hidden;
}

#animationWrapper {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background-color: black;
}

#animationCanvas {
	aspect-ratio: 16 / 9;
	object-fit: contain;
	width: 100vw;
	height: 100vh;
}

#boyAnimation {
	width: 28rem;
	margin: -2rem -6rem;
	aspect-ratio: 16 / 9;
	pointer-events: none;
}

@keyframes rideRight {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(40rem);
	}
}

#menuBackground {
	width: 100%;
	height: 100%;
	background-image: url("../img/bg_main.jpg");
	background-size: cover;
	background-position: center;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#menuCenterpiece {
	background-image: url("../img/main_menu_clocks.webp");
	background-size: cover;
	background-position: center;
	aspect-ratio: 16 / 9;
	height: 100%;
	position: relative;
}

#centerpieceWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	width: 100%;
}

#menuControls {
	display: flex;
	justify-content: space-evenly;
	align-items: flex-end;
	flex-direction: row;
	height: 75px;
	width: 100%;
	padding-bottom: 20px;
}

#canvasWrapper {
	object-fit: cover;
	height: 100vh;
	position: relative;
	aspect-ratio: 16 / 9;
}

#homeTitle {
	position: absolute;
	top: 68%;
	bottom: 12%;
	left: 40%;
	right: 34%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: "Romanesco", cursive;
}

#loadingScroll {
	position: absolute;
	top: 2%;
	bottom: 75%;
	left: 35%;
	right: 35%;
	background-image: url("../img/scroll_full.webp");
	background-position: center;
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Romanesco", cursive;
}

.menuScrollContent {
	background-image: url("../img/scroll_body.webp");
	background-position: center;
	background-size: auto 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.menuScroll {
	width: 20%;
	height: 100px;
	position: relative;
}

.menuScrollLeft {
	position: absolute;
	height: 140%;
	width: auto;
	left: -10%;
	top: -20%;
}

.menuScrollRight {
	position: absolute;
	height: 140%;
	width: auto;
	right: -10%;
	top: -20%;
}

.scrollEdge {
	pointer-events: none;
}

#playWrapper {
	position: absolute;
	top: 25%;
	bottom: 18%;
	left: 39%;
	right: 34%;
	font-family: "Romanesco", cursive;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

#settingsWrapper {
	position: absolute;
	top: 25%;
	bottom: 18%;
	left: 39%;
	right: 34%;
	font-family: "Romanesco", cursive;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

#optionsWrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.optionWrapper {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 8%;
	width: 80%;
}

.optionWrapperRow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 8%;
	width: 80%;
}

#musicVolume {
	width: 100%;
}

#effectsVolume {
	width: 100%;
}

#numPapers {
	font-family: "Romanesco", cursive;
	text-align: center;
}

input[type="checkbox"] {
	accent-color: black;
	margin: 0;
}

input[type="range"] {
	accent-color: black;
}

.scoringLineHor {
	width: 90vw;
}

#scoreHeadline {
	font-family: "Cinzel", serif;
	font-size: 3.5rem;
	font-weight: 700;
	width: 90vw;
	text-align: center;
}

#scoreTitle {
	width: 100vw;
	text-align: center;
	font-family: "Romanesco", cursive;
	margin-top: 8vw;
	font-size: 12rem;
}

#scoreSubtitle {
	margin: -1.5rem 0 1rem 0;
	font-family: "Cinzel", serif;
	font-weight: 700;
	font-size: 1.5rem;
}

#scoreArticles {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	font-family: "Times New Roman", Times, serif;
	width: 90vw;
	margin-top: 2rem;
}

.scoreColumn {
	flex-grow: 1;
	width: 33.333%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#line12 {
	position: absolute;
	top: 0;
	left: 32.5%;
	height: 100%;
}

#line23 {
	position: absolute;
	top: 0;
	right: 32.5%;
	height: 100%;
}

#continueButtons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 4rem;
}

#scoreEditorial {
	width: 90vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin: 2rem 0;
}

#scoreEditorialTitle {
	font-family: "Cinzel", serif;
	font-weight: 700;
	font-size: 3rem;
	margin-bottom: 2rem;
}

#scoreEditorialText {
	font-family: "Times New Roman", Times, serif;
	text-align: left;
	width: 85vw;
	font-size: 1.5rem;
}

.scoreButton {
	margin: 0 15vw;
	font-size: 6rem;
	font-family: "Romanesco", cursive;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	background-color: transparent;
	outline: none;
	border: none;
	text-align: center;
	width: 20rem;
}

.scoreButton:focus {
	outline: 3px solid black;
}

#introWrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 102;
	background-image: url("../img/bg_main_no_icon.jpg");
	background-size: cover;
	background-position: center;
}

#introContent {
	padding: 6rem 9rem;
	background-image: url("../img/scroll_full.webp");
	background-size: 100% 100%;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#introTextWrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#introText {
	width: 40vw;
	font-size: 1.5rem;
}

#introImg {
	height: 20rem;
	width: auto;
}

#introButton {
	font-family: "Romanesco", cursive;
	background-color: transparent;
	outline: none;
	border: none;
	padding: 0.25rem 1.5rem;
	cursor: pointer;
	text-align: center;
	font-size: 3rem;
	margin-bottom: 1.5rem;
}

#introButton:focus {
	outline: 3px solid black;
}

#confirmWrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 101;
}

#audioConfirm {
	background-image: url("../img/scroll_full.webp");
	background-size: 100% 100%;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 8rem;
	font-size: 2rem;
}

#confirmButtons {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}

.confirmButton {
	cursor: pointer;
	background-color: transparent;
	font-size: 2rem;
	border: none;
	outline: none;
}

.confirmButton:focus {
	outline: 3px solid black;
}

#newspaperImageWrapper {
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#newspaperImage {
	width: 70%;
}

.articleElement {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 3rem;
}

.articleTitle {
	text-align: center;
	font-size: 2rem;
	font-family: "Cinzel", serif;
	font-weight: 600;
	margin-bottom: 1rem;
}

.articleText {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5rem;
	text-align: justify;
	padding: 0 1rem;
}

.articleScore {
	font-style: italic;
	margin-top: 1rem;
	font-size: 1.5rem;
}

.articleLink {
	color: black;
	margin-top: 1rem;
	font-size: 1.3rem;
}

#scoreColumn1 {
	padding: 0 1rem;
}

#menuCenterpieceBackground {
	position: absolute;
	top: 10%;
	left: 30%;
	width: 45%;
	height: 80%;
}

#menuCenterpieceContentWrapper {
	position: absolute;
	top: 15%;
	left: 35%;
	width: 35%;
	height: 70%;
	padding-top: 25px;
}

#menuCenterpieceContent {
	position: absolute;
	inset: 70% 0 30% 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
}

#playMenu {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: calc(90% - 15px);
	padding-top: 15px;
	padding-left: 5%;
	overflow: scroll;
	width: 95%;
}

#playMenuNavbar {
	width: 100%;
	height: 20%;

	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}

#playMenuContent {
	width: 100%;
	height: 80%;
}

#dailyContent {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#customContent {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#dailyRemainingLabel {
	margin: 0;
}

.menuNavbarButton {
	font-family: "Romanesco", cursive;
	background-color: transparent;
	outline: none;
	border: none;
	cursor: pointer;
}

#settingsMenu {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 95%;
	height: calc(90% - 15px);
	padding-top: 15px;
	padding-left: 5%;
	overflow: scroll;
}

#menuCenterpieceContent.contentFolded {
	inset: 70% 0 30% 0;
}

#menuCenterpieceContent.contentUnfurled {
	inset: 0 0 0 0;
}

#menuCenterpieceScroll.unfurl {
	width: 100%;
	height: 100%;
	background-image: url("../img/animations/unfurl_strip.png");
	background-repeat: no-repeat;
	background-size: 500% 100%; /* 5 frames across */
	background-position: 0% 0%; /* frame 0 */
}

/* resting states */
#menuCenterpieceScroll.idle0 {
	background-position: 0% 0%;
}
#menuCenterpieceScroll.idle4 {
	background-position: 100% 0%;
}

@keyframes unfurlForward {
	from {
		background-position: 0% 0%;
	}
	to {
		background-position: 100% 0%;
	}
}

@keyframes unfurlReverse {
	from {
		background-position: 100% 0%;
	}
	to {
		background-position: 0% 0%;
	}
}

@keyframes unfurlContentForward {
	from {
		inset: 70% 0 30% 0;
	}
	to {
		inset: 0 0 0 0;
	}
}

@keyframes unfurlContentReverse {
	from {
		inset: 0 0 0 0;
	}
	to {
		inset: 70% 0 30% 0;
	}
}

#menuTitle {
	position: absolute;
	width: 35%;
	height: 20%;
	bottom: 14%;
	left: 37%;
}

#menuTitleText {
	font-size: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0;
	transform: rotate(-2.5deg);
}

#clockWrapper {
	position: absolute;
	width: 30%;
	aspect-ratio: 1 / 1;
	top: 20.8%;
	left: 36.7%;
}

.clockHandLarge {
	position: absolute;
	transform-origin: 28.3% 32.2%;
	width: 40%;
	height: 40%;
	transform: translateX(-28.3%) translateY(-32.2%) rotate(-90deg);
}

.clockHandMedium {
	position: absolute;
	transform-origin: 68% 34%;
	width: 25%;
	height: 25%;
	transform: translateX(-68%) translateY(-34%) rotate(70deg);
}

.clockHandSmall {
	position: absolute;
	transform-origin: 50% 50%;
	width: 20%;
	height: 20%;
	transform: translateX(-50%) translateY(-50%) rotate(0deg);
}

#clockHandLarge {
	top: 50%;
	left: 50%;
}

#clockHandMedium {
	top: 50%;
	left: 50%;
}

#clockHandSmall1 {
	top: 52%;
	left: 30%;
}

#clockHandSmall2 {
	top: 45%;
	left: 68.5%;
}

.lockIcon {
	width: 20px;
	height: auto;
	margin: 10px;
}

.freemiumUpgradeButton {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	cursor: pointer;
	max-width: 100%;
}

.freemiumText {
	font-size: 16px;
}

.freemium {
	max-width: 100%;
	margin: 10px;
}