/* CSS RESET */

*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: 100%;}
html:focus-within {scroll-behavior: smooth;}
body {min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img, picture {display: block; max-width: 100%;}
input, button, textarea, select {font: inherit;}
@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior: auto;} *, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}

/* STYLES */

body {
	height: 100vh;
	width: 100vw;
	font-family: 'Caveat Brush', Georgia, serif;
	background-color: black;
	color: white;
	overflow-x: scroll;
	overflow-y: hidden;
	user-select: none;
}

.slideshow {
	display: flex;
	height: 100vh;
	width: max-content;
	transition: transform 150ms ease-out;
}

.heading {
	position: relative;
	padding: 4vh;
	height: 100vh;
	min-width: 100vh;
	background-color: black;
	font-size: 4vh;
}

.heading > div {
	position: absolute;
	padding: inherit;
}

@keyframes hint-blink {
	0% {color: #ffa6009f;}
	100% {color: #ffa600d8;}
}

.hint {
	bottom: 0;
	right: 0;
	font-size: 3vh;
	color: #faf5ec;
	animation: 1s ease-in-out infinite alternate hint-blink;
}

.hint-hidden {
	opacity: 0;
	transition: opacity 1s ease-out;
}

a {
	color: #f5e3d8;
	transition: color 100ms ease-in-out;
}

a:hover {
	color: inherit;
}