Flickering text ♡

</br>
<div id="sol">
		<div class="soltit"><span class="solro">You can change</span> <span class="solaz">the speed too</span> </div>
<style>

@keyframes solpar {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.soltit {
	width: 400px;
	font-family: 'Lato';
	color: var(--rcd4);
	text-align: center;
	font-size: 25px;
	text-transform: uppercase;
}

.solro {
	color: var(--rcd2);
	text-shadow: 0px 0px 2px var(--rcd2), 0px 0px 3px var(--rcd2), 0px 0px 6px var(--rcd2), 0px 0px 10px var(--rcd2);
	animation: solpar 2s infinite;
}

.solaz {
	color: var(--rcd3);
	text-shadow: 0px 0px 2px var(--rcd3), 0px 0px 3px var(--rcd3), 0px 0px 6px var(--rcd3), 0px 0px 10px var(--rcd3);
	animation: solpar 3.5s infinite;
}


#sol { /**Vary your colors here**/
	--rcd1: #fbdb2e;
	--rcd2: #e0318e;
	--rcd3: #078caf;
	--rcd4: #FFFFFF;
	--rcd5: #000000;
}

</style>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Press+Start+2P&family=Roboto:wght@300&display=swap" rel="stylesheet">