<h1>Jello</h1>

@font-palette-values --effect {
	font-family: "Bungee Spice";
	override-colors: 0 #1894b0, 1 #fc00fc;
}

@font-palette-values --transition {
	font-family: "Bungee Spice";
	override-colors: 0 #fc00fc, 1 #4200d9;
}

html {
	height: 100%;
}

body {
	background: url("https://assets.codepen.io/209981/glitter-gradient-soft.jpg"),
		linear-gradient(to right, #0b041c, #492790, #0b041c);
	height: 100%;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-blend-mode: color-burn;
}

h1 {
	font-size: 20vw;
	font-family: "Bungee Spice", sans-serif;
	font-palette: --effect;
	transition: ease 250ms font-palette;
	text-shadow: -1px 0 1px #fb9fff, 0 1px 1px #fb9fff, 5px 5px 0 #7874ff,
		-5px -5px 0 #ed3afc;
}

h1:hover {
	font-palette: --transition;
}