body::before {
	background-image: url("/images/textures/texture-13.jpg");
	background-position: center;
	background-repeat: repeat;
	background-size: 280px;
	content: "";
	inset: 0;
	mix-blend-mode: overlay;
	opacity: 0.5;
	pointer-events: none;
	position: fixed;
	z-index: -1;
}

main > div {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 3rem;
	justify-content: space-evenly;
	min-block-size: 100dvb;
	padding-block: 3rem;
	padding-inline: 0.5rem;
}

@keyframes flash {
	0% { color: var(--amber-10); }
	12% { color: var(--red-10); }
	25% { color: var(--gold-10); }
	37% { color: var(--tomato-10); }
	50% { color: var(--yellow-10); }
	62% { color: var(--crimson-10); }
	75% { color: var(--orange-10); }
	87% { color: var(--jade-10); }
	100% { color: var(--amber-10); }
}

main > div p {
	animation: flash 750ms step-end infinite;
	color: var(--amber-10);
	font-family: var(--font-cursive);
	font-size: clamp(1.6875rem, 0.8438rem + 3.75vi, 3.75rem);
	font-weight: 550;
	inline-size: 100vi;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	position: fixed;
	text-align: center;
	transform: translate(-50%, -50%);
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	main > div p {
		animation: none;
	}
}

button {
	align-self: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transform: rotate(5deg);
	transition: opacity 250ms ease-out;
}

button:active {
	opacity: 0.5;
}

button img {
	block-size: auto;
	display: block;
	inline-size: min(280px, 70vi);
}

button:last-of-type {
	position: relative;
	transform: rotate(-12deg);
}

button:last-of-type::before, button:last-of-type::after {
	aspect-ratio: 7.05 / 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	pointer-events: none;
	position: absolute;
}

button:last-of-type::before {
	background-image: url("/images/stroke-1.png");
	inline-size: 66%;
	inset-block-start: 47%;
	inset-inline-start: 49%;
	transform: translate(-50%, -50%) rotate(47deg);
}

button:last-of-type::after {
	background-image: url("/images/stroke-2.png");
	inline-size: 61%;
	inset-block-start: 53%;
	inset-inline-start: 51%;
	transform: translate(-50%, -50%) rotate(-40deg) scaleX(-1);
}