Distortion of SIT.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>@distortion</title>
	<style>
		*
		{
			margin: 0;
			padding: 0;
			font-family: 'Poppins', algerian;
		}
		body
		{
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background: #000;

		}
		h2
		{
			position: relative;
			color: #fff;
			font-size: 3em;
			font-weight: 900;
			z-index: 1;
			margin: 40px 0 0;
			overflow: hidden;
		}

		h2:before
		{
			content: '';
			position: absolute;
			left: 110%;
			width: 120%;
			height: 100%;
			background: linear-gradient(90deg,transparent 0%, #000 5%, #000 100%);
			animation: animate 5.5s linear forwards;
			animation-delay: 2.2s;
		}
		@keyframes animate
		{
			0%
			{
				left: 95%
			}
			100%
			{
				left: -20%
			}
		}


		h2 span
		{
			color: #ff022c;
		}
		video
		{
			position: absolute;
			top: 0;
			left: 0
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 2;
			pointer-events: none;
			mix-blend-mode: screen;
		}

	</style>
</head>
<body>
	<video src="video/particles.mp4" muted="" autoplay=""></video>
	<!-- <h2><span>S</span>ubha In<span>fo</span>Tech</h2> -->
	<h2><span>WEL</span>COME TO <span>S</span>UBHA INFOTECH</h2>

</body>
</html>