@font-face {
	font-family: "Aftika ExtraBold";
	src: url("Fontspring-DEMO-aftika-extrabold.otf") format("opentype");
	font-weight: bold;
	font-style: normal;
}

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,900;1,900&display=swap");

body {
	font-family: "Aftika ExtraBold", Arial, sans-serif;
}

.red::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	width: 8px; /* arrow width */
	height: 80px;
	transform: translateY(-50%);
	background: linear-gradient(
		to bottom,
		#404040 0%,
		#404040 50%,
		black 50%,
		black 100%
	);
	clip-path: polygon(0 25%, 100% 50%, 0 75%);
}

.red::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 8px; /* arrow width */
	height: 80px;
	transform: translateY(-50%);
	background: linear-gradient(
		to bottom,
		#c75b6e 0%,
		#c75b6e 50%,
		#bd2c41 50%,
		#bd2c41 100%
	);
	clip-path: polygon(0 25%, 100% 50%, 0 75%);
}

.red {
	animation: move-right 7s linear infinite;
}

@keyframes move-right {
	0% {
		transform: translateX(0%);
	}
	66% {
		transform: translateX(150%);
	}
	66.0001% {
		transform: translateX(-50%);
	}
	90% {
		transform: translateX(0%);
	}
}