<div>
	<h1>
		Jello
	</h1>
</div>

body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0b0c29;
}

div {
	height: 95vh;
	width: 95vw;
	background: url("https://assets.codepen.io/209981/iStock-1490023614.jpg");
	background-size: 100% 100%;
	background-position: center 50%;
	transition: all ease 1s;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #37fffe;
	box-shadow: -2px 2px #fc00a3;
}

div:hover {
	background-size: 170% 170%;
}

@font-palette-values --retro {
	font-family: "Honk";
	base-palette: 5;
	override-colors: 0 #03001f, 1 #03001f, 2 transparent, 3 transparent,
		4 transparent, 5 transparent, 6 transparent, 7 transparent;
}

h1 {
	font-family: "Honk", system-ui;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "MORF" 14, "SHLN" 100;
	font-palette: --retro;
	font-size: calc(30vw + 0.5rem);
	letter-spacing: 0.2ch;
	filter: drop-shadow(-1px 1px 0px #ff00b2) drop-shadow(-10px 10px 10px #000);
	transition: ease 250ms font-palette;
	transform: rotate(10deg);
	text-shadow: -5px 0px 0 #36fffe, 5px 0px 0 #36fffe;
}