* {
	margin: 0;
	padding: 0;
}

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

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

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

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

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: translate(0%);
	}
	100%
	{
		transform: translate(-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: translate(-100%);
	}
	100%
	{
		transform: translate(100%);
	}
}

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