@import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');

*{
	margin:0;
	padding: 0;
	font-family: 'Days One', sans-serif;
}

section{
	position: relative;
	width: 100%;
	height: 100vh;
	background: #111;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

section .row{
	position: relative;
	top: -50%;
	width: 100%;
	display: flex;
	padding: 10px 0;
	white-space: nowrap;
	font-size: 64px;
	transform: rotate(-30deg);
}

i{
	color: rgba(0, 0, 0, 0.5);
	transition: 1s;
	padding: 0 5px;
	user-select: none;
	cursor: default;
}

i:nth-child(17),
i:nth-child(23),
i:nth-child(32){
	padding-right: 20px;
}

i:hover{
	transition: 0s;
	color: #82D2F5;
	text-shadow: 0 0 120px #82D2F5;
}

section .row div{
	animation: animate1 80s linear infinite;
	animation-delay: -80s;
}

section .row div:nth-child(2){
	animation: animate2 80s linear infinite;
	animation-delay: -40s;
}

@keyframes animate1
{
	0%
	{
		transform: translateX(100%);
	}
	100%
	{
		transform: translateX(-100%);
	}
}

@keyframes animate2
{
	0%
	{
		transform: translateX(0%);
	}
	100%
	{
		transform: translateX(-200%);
	}
}

section .row:nth-child(even) div{
	animation: animate3 80s linear infinite;
	animation-delay: -80s;
}

section .row:nth-child(even) div:nth-child(2){
	animation: animate4 80s linear infinite;
	animation-delay: -40s;
}

@keyframes animate3
{
	0%
	{
		transform: translateX(-100%);
	}
	100%
	{
		transform: translateX(100%);
	}
}

@keyframes animate4
{
	0%
	{
		transform: translateX(-200%);
	}
	100%
	{
		transform: translateX(0%);
	}
}