/* Copyright The Lowbrow Software Company 2024 */

:root {
	--sky-color: rgb(135, 206, 235);
	--grass-color: rgb(124, 252, 0);
	--stone-color: rgb(101, 115, 131);
	--stream-color: rgb(255, 211, 62);
	--bubble-color: rgb(255, 220, 101);
	--engraving-color: rgb(200, 200, 200);
}

html, body {
	overflow-x: hidden;
	overflow-y: hidden;
}

.sky {
	background-color: var(--sky-color);
	position: absolute;
	top: 0;
	width: 100%;
	height: 22%;
}

.grass {
	background-color: var(--grass-color);
	position: absolute;
	top: 22%;
	width: 100%;
	bottom: 0;
}

#askwho {
	position: absolute;
	top: 10%;
	width: 100%;
	text-align: center;
}

#askwho label {
	font-family: sans-serif;
}

#puddle {
	animation: puddle 24s ease-in 13s;
	animation-fill-mode: forwards;
	fill: var(--stream-color);
	opacity: 65%;
}

@keyframes puddle {
	from {
		rx: 300px;
		ry: 0px;
	}

	to {
		rx: 500px;
		ry: 200px;
	}
}

#headstone {
	position: absolute;
	top: 10%;
	left: 50%;
	width: 50%;
}
@media only screen and (max-width: 1284px) {
    width: 90%;
}

.revealedform {
	display: none;
	position: absolute;
	top: 0%;
	left: 50%;
	text-align: center;
}

#hateagain button {
	background-color: var(--stream-color);
}

#playaudio {
	display: none;
}

.engraving {
	stroke: black;
	fill: var(--engraving-color);
	font: bold 0.5em luminary, fantasy;
	text-align: center;
	text-anchor: middle;
	animation: walk-in 5s linear;
	animation-fill-mode: forwards;
}

@keyframes walk-in {
	from {
		font-size: 0.5em;
		color: white;
	}

	to {
		font-size: 3em;
	}
}

.stone {
	fill: var(--stone-color);
	color: lightgray;
}

#stream {
	stroke-dasharray: 50000;
	stroke-dashoffset: 50000;
	stroke: var(--stream-color);
	animation: stream-start 2s ease-in 7s, stream-end 3s ease-in 32s;
	animation-fill-mode: forwards, forwards;
	opacity: 75%;
}

@keyframes stream-start {
	0% {
		stroke-dashoffset: 1500;
		stroke-width: 1;
	}

	75% {
		stroke-dashoffset: 0;
		stroke-width: 1em;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-width: 2em;
	}
}

@keyframes stream-end {
	0% {
		stroke-dashoffset: 1500;
		stroke-width: 1;
		stroke: transparent;
	}

	75% {
		stroke-dashoffset: 0;
		stroke-width: 1em;
		stroke: transparent;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-width: 2em;
		stroke: transparent;
	}
}

.bubble {
	offset-path: path("M1099 1000 C 1400 200, 800 0, 509 413");
	offset-distance: 0%;
	fill: transparent;
	stroke: transparent;
	stroke-width: 1;
}

#bubble1 {
	animation: bubble 5s linear 10s 4;
}

#bubble2 {
	animation: bubble 5s linear 12s 3;
}

#bubble3 {
	animation: bubble 5s linear 14s 3;
}

@keyframes bubble {
	from {
		offset-distance: 0%;
		fill: var(--bubble-color);
		stroke: white;
	}

	to {
		offset-distance: 100%;
	}
}

#splash {
	animation: splash-start 5s ease-in 8s, splash-end 2s ease-in 32s;
	animation-fill-mode: forwards, forwards;
	fill: var(--stream-color);
	opacity: 75%;
	clip-path: inset(0% 0% 100% 0%);
}

@keyframes splash-start {
	to {
		clip-path: inset(0% 0% 0% 0%);
	}
}

@keyframes splash-end {
	to {
		clip-path: inset(100% 0% 0% 0%);
	}
}