body {
	font-family: sans-serif;
}
h1 {
	text-transform: lowercase;
	font-weight: normal;
	position: relative;
}
h1::after {
	content: "!wonderful.furious.groovy";
	animation: heading 2s cubic-bezier(1,.01,1,.01) forwards;
	background: white;
	position: absolute;
	left: 0;
}
h1::first-letter {
	color: white;
}
input,
button {
	font: inherit;
}
input {
	width: 100%;
}
/* 
graceful, grand, grandiose, grateful, gratifying, great, grin, grimy, groovy, grotesque
*/
@keyframes heading {
	0% {
		content: "!wonderful.furious.groovy";
	}
	3% {
		content: "w!onderful.furious.groovy";
	}
	6% {
		content: "wo!nderful.furious.groovy";
	}
	9% {
		content: "won!derful.furious.groovy";
	}
	12% {
		content: "wond!erful.furious.groovy";
	}
	15% {
		content: "wond!erful.furious.groovy";
	}
	18% {
		content: "wonde!rful.furious.groovy";
	}
	21% {
		content: "wonder!ful.furious.groovy";
	}
	24% {
		content: "wonderf!ul.furious.groovy";
	}
	27% {
		content: "wonderfu!l.furious.groovy";
	}
	30% {
		content: "wonderful!.furious.groovy";
	}
	33% {
		content: "wonderful.!furious.groovy";
	}
	36% {
		content: "wonderful.f!urious.groovy";
	}
	39% {
		content: "wonderful.fu!rious.groovy";
	}
	42% {
		content: "wonderful.fur!ious.groovy";
	}
	45% {
		content: "wonderful.furi!ous.groovy";
	}
	48% {
		content: "wonderful.furio!us.groovy";
	}
	51% {
		content: "wonderful.furiou!s.groovy";
	}
	54% {
		content: "wonderful.furious!.groovy";
	}
	57% {
		content: "wonderful.furious.!groovy"
	}
	60% {
		content: "wonderful.furious.g!roovy"
	}
	63% {
		content: "wonderful.furious.gr!oovy"
	}
	88% {
		content: "wonderful.furious.gr!oovy"
	}
	91% {
		content: "wonderful.furious.gro!ovy"
	}
	94% {
		content: "wonderful.furious.groo!vy"
	}
	97% {
		content: "wonderful.furious.groov!y"
	}
	100% {
		content: "wonderful.furious.groovy!"
	}
}