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

* {margin: 0; padding: 0; box-sizing: border-box;}

:root {
	--text-color: black;
	--backdrop: #f4ecd8;
	--temporary: grey;
	--secret-dark: #604203;
	--secret-light: #8c6209;
}

html {font-size: 13pt;}

body {
	width: min(500px, 100%);
	margin-inline: auto;
	min-height: 100svh;
	background-color: var(--backdrop);
	font-family: 'Libertinus Serif', serif;
	padding: 1rem;
}

main {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

h1 {
	font-weight: 600;
	font-size: 1.75rem;
	text-align: center;
}

.picture-dummy {
	background-color: var(--temporary);
	width: 100%;
	aspect-ratio: 3 / 2;
}

img {
	width: 100%;
	margin-block: 0.5rem;
}

.text-block {
	text-indent: 0.75rem;
	line-height: 1.325;
	text-align: justify;
	hyphens: auto;
	text-wrap-style: pretty;
}

.next-page {
	display: block;
	font-size: 1.25rem;
	color: blue;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	cursor: pointer;
}

.next-page:hover {color: rgb(50, 50, 255);}

.secret-link {color: rgb(140, 0, 183);}
.secret-link:hover {color: rgb(180, 0, 237);}

.next-page::before {
	content: '> ';
}

.secret {
	cursor: pointer;
	color: var(--secret-dark);
	animation: secret-pulse 2s infinite alternate;
}

@keyframes secret-pulse {
	0% {color: var(--secret-dark);}
	100% {color: var(--secret-light);}
}

.collected {
	--secret-dark: rgb(196, 9, 15);
	--secret-light: rgb(213, 24, 103);
}

.document {
	background-color: ghostwhite;
	font-family: sans-serif, system-ui;
	font-size: 12pt;
	margin-block: 0.5rem;
	padding: 0.3rem 0.75rem 0.5rem;
	text-align: left;
	box-shadow: 0.05rem 0.1rem 0 hsla(0, 0%, 0%, 0.25);
}

.borealis {
	text-align: center;
	margin-block: 0.5rem;
}

.gameover {
	background-color: black;
	color: gold;
	font-family: monospace, system-ui;
	font-size: 12pt;
	margin-top: 0.5rem;
}

#controls {
	margin-top: 1rem;
}

#controls button {
	font-family: 'Libertinus Serif', serif;
	cursor: pointer;
}

#debug {display: none;}
#debug.visible {display: block;}