<h1 data-splitting class="heading">
	<span class="cookie">cookie</span>
	<span class="shadow" aria-hidden="true">cookie</span>
	<span class="icing icing-shadow" aria-hidden="true">cookie</span>
	<span class="icing icing-sprinkles" aria-hidden="true">cookie</span>
</h1>

html {
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(to bottom, #fef9f3 0%, #f9dbc8 100%),
		url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/xmasbg-pink.jpg);
	background-size: cover;
	background-blend-mode: color-burn;
}

h1 {
	font-size: 18vw;
	font-family: "This Man This Monster";
	font-variation-settings: "CHEW" 3, "BITE" 5;
	color: #bca082;
	position: relative;
	margin-top: 30%;
}

// Rotating the letters 
.splitting .char:nth-child(3n + 2) {
	transform: rotate(10deg);
}

.splitting .char:nth-child(2n + 2) {
	transform: rotate(-8deg);
}

// Allow positioning
.splitting .char,
.splitting .word {
	display: inline-block;
	position: relative;
}

.cookie {
	.char {
		background-image: url("https://assets.codepen.io/209981/cookie-compressed.jpg");
		background-repeat: repeat;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 200%;
		background-position: 0;
	}
}

.shadow {
	position: absolute;
	top: 0;
	left: 0;
	text-shadow: 0 1px 2px rgba(146, 97, 60, 0.5),
		0 -1px 2px rgba(146, 97, 60, 0.5), -1px 0px 2px rgba(146, 97, 60, 0.5),
		1px 0px 2px rgba(146, 97, 60, 0.5), 0 1px 5px rgba(146, 97, 60, 0.3),
		0 -1px 5px rgba(146, 97, 60, 0.3), -1px 0px 5px rgba(146, 97, 60, 0.3),
		0px 0px 5px rgba(146, 97, 60, 0.3), 0 15px 25px rgba(97, 59, 7, 0.3),
		0 -3px 4px rgba(97, 59, 7, 0.3), 0 -10px 15px rgba(#5a3e0a, 0.2),
		0 3px 4px rgba(90, 66, 9, 0.11), 0 0 5px rgba(56, 39, 22, 0.3),
		0 20px 30px rgba(255, 237, 225, 0.2);

	.char,
	.word {
		z-index: -1;
	}
}

.icing-sprinkles .char {
	background-image: url(https://assets.codepen.io/209981/cookie-icing-compressed.jpg);
	background-size: cover;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.icing-shadow {
	text-shadow: 1px 1px 2px #5c3f12, -1px 1px 2px #5c3f12, 1px 1px 2px #bdaa8b,
		-1px 1px 3px #bdaa8b, 1px -1px 3px #bdaa8b, -1px -1px 3px #bdaa8b,
		2px 2px 4px rgba(120, 89, 40, 0.4), -2px 2px 4px rgba(120, 89, 40, 0.4),
		2px -2px 4px rgba(120, 89, 40, 0.4), -2px -2px 4px rgba(120, 89, 40, 0.4);
	filter: blur(3px);
}

.icing {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	font-variation-settings: "CHEW" 3, "BITE" 0;

	.char {
		transform: scale(0.7, 0.75);

		@media screen and (min-width: 500px) {
			transform: scale(0.8, 0.85);
		}
	}

	.char:nth-child(3n + 2) {
		transform: scale(0.7, 0.85) rotate(10deg);

		@media screen and (min-width: 500px) {
			transform: scale(0.8, 0.95) rotate(10deg);
		}
	}

	.char:nth-child(2n + 2) {
		transform: scale(0.7) rotate(-8deg);
		@media screen and (min-width: 500px) {
			transform: scale(0.8) rotate(-8deg);
		}
	}
}

@keyframes munch {
	0% {
		font-variation-settings: "CHEW" 0, "WONK" 1.4, "BITE" 0;
	}

	25% {
		font-variation-settings: "CHEW" 2, "WONK" 8.64, "BITE" 2;
	}

	75% {
		font-variation-settings: "CHEW" 3, "WONK" 5, "BITE" 3;
	}

	100% {
		font-variation-settings: "CHEW" 5, "WONK" 10, "BITE" 5;
	}
}

Splitting();