.container
	.bats
		svg#bat-svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 15000 15000")
			path#bat-1(
				d="M2035 25a684 684 0 0 1-504 501l-68-228-73 77c-24-21-126-21-150 0l-73-77-68 228A686 686 0 0 1 595 25 675 675 0 0 1 35 280c156 16 307 116 306 268 91-26 194-36 274 13 86 52 125 161 128 260 220-155 413 92 510 337 4-17 16-76 62-139 38 51 51 96 62 139 98-248 291-491 510-337 7-212 139-348 402-273-1-154 153-252 306-268-246 2-433-96-560-255z"
			)
			- for ( i=1; i < 7 ; i++ )
				use(href="#bat-1", id='bat-' + (i + 1))
	.sky
		.title happy
		.title.orange HALLOWEEN
		.dropdown
			label(for="monster-select") Choose One:
			select#monster-select(
				name="monster",
				onchange="this.dataset.highlighted = this.value;"
			)
				option(value="")
				option(value="Ghost") Ghost
				option(value="Ghoul") Ghoul
				option(value="Marshmallow Monster") Marshmallow Monster
				option(value="Vampire") Vampire
				option(value="Werewolf") Werewolf
				option(value="Skeleton") Skeleton
	.ground
		.ground__wave
			// Generated by https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
			svg#wave-svg(viewBox="0 0 500 150", preserveAspectRatio="none")
				path#wave(
					d="M-0.84,61.69 C194.41,19.25 199.48,122.88 500.27,79.45 L500.00,150.00 L0.00,150.00 Z"
				)
				text#ground__group
					textpath#ground__text(
						href="#wave",
						text-anchor="middle",
						startOffset="22.5%"
					)
View Compiled
// Design: https://www.vecteezy.com/vector-art/1997306-happy-halloween-with-moon-light-illustration-in-flat-style

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@800&family=Gamja+Flower&family=Lakki+Reddy&family=Nosifer&family=Rock+Salt&family=Sniglet:wght@800&family=Sue+Ellen+Francisco&family=Walter+Turncoat&display=swap");

$main: "Lakki Reddy", cursive;
$sub: "Gamja Flower", cursive;
$max-content: 58.125rem;

// Exported Pallette from Coolors.co

$midnight-blue: hsla(245, 50%, 26%, 1);
$spanish-violet: hsla(258, 50%, 30%, 1);
$ksu-purple: hsla(269, 53%, 33%, 1);
$rebecca-purple: hsla(273, 53%, 37%, 1);
$white: hsla(150, 100%, 100%, 1);
$white-alpha: hsla(150, 100%, 100%, 0.5);
$alice-blue: hsla(212, 100%, 97%, 1);
$carrot-orange: hsla(32, 87%, 55%, 1);
$prussian-blue: hsla(204, 93%, 11%, 1);

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

	::-moz-selection {
		color: $carrot-orange;
	}

	::selection {
		color: $carrot-orange;
	}
}

body {
	height: 100vh;
	overflow: hidden;

	position: relative;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;

	//added .1rem to each color stop to give anti-aliased effect
	//argument circle to maintain aspect ratio

	background: radial-gradient(
			circle at 50% 70%,
			$white 0,
			$white 10rem,
			$rebecca-purple 10.1rem,
			$rebecca-purple 20rem,
			$ksu-purple 20.1rem,
			$ksu-purple 30rem,
			$spanish-violet 30.1rem,
			$spanish-violet 40rem,
			$midnight-blue 40.1rem
		)
		no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	font-family: $main;
	font-size: 2rem;
	line-height: 3.5rem;
	color: $alice-blue;
	text-align: center;

	a {
		color: inherit;
		text-decoration: none;
	}
}

.container {
	position: relative;
	height: 100%;
	max-width: $max-content;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
}

.bats {
	position: fixed;
	width: $max-content;
	height: 100%;

	//not sure why the first bat can't be positioned so I made it transparent
	fill: transparent;

	@for $i from 2 through 7 {
		#bat-#{$i} {
			fill: $prussian-blue;
			transform-origin: 50% 50%;
		}
	}

	#bat-2 {
		x: 10%;
		y: 10%;
		transform: rotate(-10deg) scale(0.45);
		filter: opacity(0.75);
	}

	#bat-3 {
		x: 30%;
		y: 30%;
		transform: rotate(10deg) scale(0.35);
		filter: opacity(0.55);
	}

	#bat-4 {
		x: 90%;
		y: -10%;
		transform: rotate(-20deg) scale(0.55);
		filter: opacity(0.95);
	}

	#bat-5 {
		x: 70%;
		y: 5%;
		transform: rotate(20deg) scale(0.45);
		filter: opacity(0.75);
	}

	#bat-6 {
		x: 0%;
		y: 55%;
		transform: rotate(20deg) scale(0.25);
		filter: opacity(0.35);
	}

	#bat-7 {
		x: 60%;
		y: 60%;
		transform: rotate(-20deg) scale(0.25);
		filter: opacity(0.15);
	}
}

.sky {
	position: absolute;
	top: 10%;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;

	.title.orange {
		color: $carrot-orange;
		font-size: 4rem;
		line-height: 4rem;
	}
}

.ground {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 100%;

	&__wave {
		fill: $prussian-blue;
		font-size: 4.5rem;

		svg {
			width: 100vw;
			height: 100%;
			//needed so text isn't cut off from svg bounding box
			overflow: visible;
		}
	}

	#ground__group {
		transform-origin: 50% 50%;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		perspective: 1000px;
		animation: ghost 5s infinite linear alternate;

		@keyframes ghost {
			0% {
				transform: translate(0, -30%);
				filter: blur(0.5rem);
				opacity: 0;
			}

			100% {
				transform: translate(0, -10%);
				opacity: 0.2;
			}
		}

		@keyframes ghoul {
			0% {
				transform: translate(0, 70%) rotate(25deg);
			}

			70% {
				transform: translate(0, 0);
			}
		}

		@keyframes marshmallow {
			0% {
				transform: translateY(-5%) skewX(5deg) scale(1.02);
			}

			50% {
				transform: translateY(-5.5%) skewX(-5deg) scale(0.98);
			}
		}

		@keyframes vampire {
			0% {
				transform: translate(0, -20%);
			}

			100% {
				transform: translate(0, -40%);
			}
		}

		@keyframes werewolf {
			50% {
				text-shadow: 0 0.025em 0.01em $prussian-blue,
					0.025em -0.025em 0.01em $prussian-blue, 0.025em 0 0.01em $prussian-blue,
					-0.025em 0.025em 0.01em $prussian-blue;
			}
		}

		@keyframes skeleton {
			20% {
				transform: translate3d(-1px, -1px, 0);
			}

			80% {
				transform: translate3d(1px, 0, 1px);
			}
		}
	}
}

.dropdown {
	display: flex;
	flex-flow: column nowrap;
	font-family: $sub;
	color: $carrot-orange;
	text-shadow: 0 1px $ksu-purple;

	#monster-select {
		width: 10rem;
		height: 3rem;
		border: 0.5rem solid $rebecca-purple;
		font-family: $sub;
		font-size: 1.2rem;
		color: $white-alpha;
		padding: 0.25rem;
		background: $ksu-purple;
		border-radius: 0.3rem;
	}
}

@media (max-height: 400px) {
	body {
		background: radial-gradient(
				circle at 50% 70%,
				$white 0,
				$white 5rem,
				$rebecca-purple 5.1rem,
				$rebecca-purple 10rem,
				$ksu-purple 10.1rem,
				$ksu-purple 15rem,
				$spanish-violet 15.1rem,
				$spanish-violet 20rem,
				$midnight-blue 20.1rem
			)
			no-repeat center center fixed;
	}

	.container {
		transform: scale(0.5);
		.sky {
			margin-top: -12%;
		}
	}

	.ground__wave {
		svg {
			margin-bottom: -25%;
			width: 200vw;
			height: 200vh;
		}
	}
}
View Compiled
const selectMonster = document.querySelector("#monster-select");
const groundText = document.querySelector("#ground__text");
const groundGroup = document.querySelector("#ground__group");
const groundWave = document.querySelector(".ground__wave");

const monsterBkgd = {
	ghost: "#FF7B00",
	ghoul: "#096B00",
	"marshmallow monster": "#009DFF",
	vampire: "#c1121f",
	werewolf: "#FF3700",
	skeleton: "#8F8F8F"
};

selectMonster.addEventListener("change", (e) => {
	groundText.textContent = `${e.target.value}`;

	//update background based on current option
	const lowercase = e.target.value.toLowerCase();

	const colors = (monsterColors) => {
		for (let color in monsterColors) {
			if (color === lowercase) {
				document.body.style.background = `radial-gradient(circle at 50% 100%, ${monsterColors[color]} 0, ${monsterColors[color]} .25rem,transparent), radial-gradient(circle at 50% 70%, white 0, white 10rem, #632c90 10.1rem, #632c90 20rem, #532881 20.1rem, #532881 30rem, #3d2673 30.1rem, #3d2673 40rem, #272163 40.1rem) no-repeat center center fixed`;
			}
		}
	};

	colors(monsterBkgd);

	if (e.target.value === "Ghost") {
		ghost();
	} else if (e.target.value === "Ghoul") {
		ghoul();
	} else if (e.target.value === "Marshmallow Monster") {
		marshmallow();
	} else if (e.target.value === "Vampire") {
		vampire();
	} else if (e.target.value === "Werewolf") {
		werewolf();
	} else if (e.target.value === "Skeleton") {
		skeleton();
	}
});

const ghost = () => {
	groundText.style.fontFamily = "Walter Turncoat";
	groundWave.style.fontSize = "4.25rem";
	groundGroup.style.animationName = "ghost";
	groundGroup.style.animationDuration = "4s";
};

const ghoul = () => {
	groundText.style.fontFamily = "Rock Salt";
	groundWave.style.fontSize = "4.25rem";
	groundGroup.style.animationName = "ghoul";
	groundGroup.style.animationDuration = "4s";
};

const marshmallow = () => {
	groundText.style.fontFamily = "Sniglet";
	groundGroup.style.animationName = "marshmallow";
	groundWave.style.fontSize = "2.25rem";
	groundGroup.style.animationDuration = "4s";
};

const vampire = () => {
	groundText.style.fontFamily = "Nosifer";
	groundGroup.style.animationName = "vampire";
	groundGroup.style.animationDuration = "6s";
};

const werewolf = () => {
	groundText.style.fontFamily = "Cinzel";
	groundGroup.style.animationName = "werewolf";
	groundGroup.style.animationDuration = "4s";
};

const skeleton = () => {
	groundText.style.fontFamily = "Sue Ellen Francisco";
	groundWave.style.fontSize = "4.25rem";
	groundGroup.style.animationName = "skeleton";
	groundGroup.style.animationDuration = ".5s";
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.