/*
	wavy-text.js stylesheet
	put the wavyText function in your html w/ the class name and id
	
	e.g.
	<script type="text/javascript" charset="utf-8">
		document.addEventListener("DOMContentLoaded", function () {
			wavyText("home-title", "wavyText");
		});
	</script>
	
	for implementing custom animations, in your CSS add
	#id > .wavyText {
		animation-name: custom-animation;
		other-property: foo;
	}
	
	@keyframes custom-animation {
		0%    { top: -.420em; }
		100%  { top: .69em; }
	}
*/

.wavyText {
	animation-name: wavyText;
	animation-duration: 2s;
	animation-delay: calc(var(--i) * -.1s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	
	position: relative;
	top: 0;
	left: 0;
	--i: 0;
}

@keyframes wavyText {
	0%    { top: -.1em; }
	100%  { top: .1em; }
}