<h1>Jello</h1>

body {
	--s: 700px;
	--c1: #eef4e9;
	--c2: #eecec5;

	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	background: conic-gradient(
		var(--c2) 63.43deg,
		var(--c1) 0 116.36deg,
		var(--c2) 0 180deg,
		var(--c1) 0 243.43deg,
		var(--c2) 0 296.15deg,
		var(--c1) 0
	);
	background-size: calc(2 * var(--s)) var(--s);
}

@font-palette-values --color {
	font-family: "Honk";
	base-palette: 4;
	override-colors: 0 #49371f, 1 #140c07, 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" 0, "SHLN" 50;
	font-palette: --color;
	font-size: calc(25vw + 0.5rem);
	text-transform: uppercase;
	position: relative;
	width: 100%;
	text-align: center;
	filter: drop-shadow(2px 2px #198064) drop-shadow(-2px -2px #d92720)
		drop-shadow(-2px -2px #fff) drop-shadow(2px 2px #eaaf1c);

	&:after {
		content: "Jello";
		position: absolute;
		width: 100%;
		background: conic-gradient(from -45deg, #7bbea8 90deg, #dc588c 90.5deg),
			conic-gradient(from 135deg, #7bbea8 90deg, #dc588c 90.5deg) calc(200px / 2) 0;
		background-size: 5vw 26vw;
		background-position: bottom left;
		left: 0;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	animation: morph 5s ease alternate infinite;
}

// @keyframes morph {
// 	0% {
// 		font-variation-settings: "MORF" 0, "SHLN" 0;
// 	}

// 	100% {
// 		font-variation-settings: "MORF" 14, "SHLN" 100;
// 	}
// }