h1 {
	color: #fff;
	font-family: 'Russo One', sans-serif;
}

h1::before {
	content: '';
	padding: 10px;
	border-radius: 15%;
	color: #fff;
	webkit-filter: saturate(50) hue-rotate(-50deg);
	filter: saturate(50) hue-rotate(-50deg);
	background-size: cover;
	opacity: 1;
	animation: 10s switch infinite;
}

@keyframes switch {
	0% {
		content: 'P';
		color: #ffde00;
		opacity: 1;
	}
	1% {
		content: 'Py'; color: #fff;
	}
	2% {
		content: 'Pyr'; color: #fff;
	}
	3% {
		content: 'Pyra'; color: #fff;
	}
	4% {
		content: 'Pyram'; color: #fff;
	}
	5% {
		content: 'Pyrami'; color: #fff;
	}
	6%, 32% {
		content: 'Pyramid'; color: #fff;
	}
	33% {
		content: 'B';
		color: #ffde00;
	}
	34% {
		content: 'Bi'; color: #fff;
	}
	35%, 49% {
		content: 'Bin'; color: #fff;
	}
	50% {
		content: 'W';
		color: #ffde00;
	}
	51%, 65% {
		content: 'We'; color: #fff;
	}
	66% {
		content: 'L';
		color: #ffde00;
	}
	67% {
		content: 'Le'; color: #fff;
	}
	68% {
		content: 'Lea'; color: #fff;
	}
	69%, 79% {
		content: 'Leak'; color: #fff;
	}
	80% {
		content: 'P';
		color: #ffde00;
		opacity: 1;
	}
	81% {
		content: 'Pe'; color: #fff;
		opacity: 1;
	}
	82% {
		content: 'Ped'; color: #fff;
		opacity: 1;
	}
	83% {
		content: 'Pedo'; color: #fff;
		opacity: 1;
	}
	84%, 90% {
		content: 'Pedos'; color: #fff;
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

b {
	animation: 750ms blink ease-in-out infinite;
}

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