/*
	Based on:
	- Pure CSS Christmas Lights by Toby (https://codepen.io/tobyj/pen/QjvEex)
	- Aditional colors by https://github.com/thechinedu/christmas-lights
	
	Modified by Leo-Librecraft	
	
	<ul class="lightrope">
	<li></li>
	</ul>
	
*/
:root {
	--luzcolor-one: rgba(0, 247, 165, 1); /* Verde */
	--luzcolor-two: rgba(0, 255, 255, 1); /* Cian */
	--luzcolor-three: rgba(247, 0, 148, 1); /* Rosa */
	--luzcolor-four: #025ba0; /* Azul Oscuro */
	--luzcolor-five: #9bc72b; /* Verde Lima */
	--luzcolor-six: #f0c517; /* Amarillo */
	--luzcolor-seven: #bf1724; /* Rojo */
	--luzcolor-eight: #5cc9f4; /* Azul Claro */
}

/*body {
	background: #000;
}*/
.lightrope {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	margin: -15px 0 0 0;
	padding: 0;
	pointer-events: none;
	width: 100%;
	/*idk es necesario el cierre*/
}
.lightrope li {
	position: relative;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 12px;
	height: 28px;
	border-radius: 50%;
	margin: 20px;
	background: var(--luzcolor-one); /* Default */
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-one);
	animation-name: flash-1;
	animation-duration: 2s;
}
.lightrope li:nth-child(8n+1) {
	background: var(--luzcolor-one);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-one);
	animation-name: flash-1;
}
.lightrope li:nth-child(8n+2) {
	background: var(--luzcolor-two);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-two);
	animation-name: flash-2;
}
.lightrope li:nth-child(8n+3) {
	background: var(--luzcolor-three);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-three);
	animation-name: flash-3;
}
.lightrope li:nth-child(8n+4) {
	background: var(--luzcolor-four);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-four);
	animation-name: flash-4;
}
.lightrope li:nth-child(8n+5) {
	background: var(--luzcolor-five);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-five);
	animation-name: flash-5;
}
.lightrope li:nth-child(8n+6) {
	background: var(--luzcolor-six);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-six);
	animation-name: flash-6;
}
.lightrope li:nth-child(8n+7) {
	background: var(--luzcolor-seven);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-seven);
	animation-name: flash-7;
}
.lightrope li:nth-child(8n) {
	background: var(--luzcolor-eight);
	box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-eight);
	animation-name: flash-8;
}
.lightrope li:nth-child (odd) {
	animation-duration: 1.6s;
}
.lightrope li:before {
	content: "";
	position: absolute;
	background: #222;
	width: 10px;
	height: 9.3333333333px;
	border-radius: 3px;
	top: -4.6666666667px;
	left: 1px;
}
.lightrope li:after {
	content: "";
	top: -14px;
	left: 9px;
	position: absolute;
	width: 52px;
	height: 18.6666666667px;
	border-bottom: solid #222 2px;
	border-radius: 50%;
}
.lightrope li:last-child:after {
	content: none;
}
.lightrope li:first-child {
	margin-left: -40px;
}

/* Keyframes para cada color */
@keyframes flash-1 {
	0%, 100% {
		background: var(--luzcolor-one);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-one);
	}
	50% {
		background: rgba(0, 247, 165, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
	}
}
@keyframes flash-2 {
	0%, 100% {
		background: var(--luzcolor-two);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-two);
	}
	50% {
		background: rgba(0, 255, 255, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
	}
}
@keyframes flash-3 {
	0%, 100% {
		background: var(--luzcolor-three);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-three);
	}
	50% {
		background: rgba(247, 0, 148, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
	}
}
@keyframes flash-4 {
	0%, 100% {
		background: var(--luzcolor-four);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-four);
	}
	50% {
		background: rgba(2, 91, 160, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(2, 91, 160, 0.2);
	}
}
@keyframes flash-5 {
	0%, 100% {
		background: var(--luzcolor-five);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-five);
	}
	50% {
		background: rgba(155, 199, 43, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(155, 199, 43, 0.2);
	}
}
@keyframes flash-6 {
	0%, 100% {
		background: var(--luzcolor-six);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-six);
	}
	50% {
		background: rgba(240, 197, 23, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(240, 197, 23, 0.2);
	}
}
@keyframes flash-7 {
	0%, 100% {
		background: var(--luzcolor-seven);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-seven);
	}
	50% {
		background: rgba(191, 23, 36, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(191, 23, 36, 0.2);
	}
}
@keyframes flash-8 {
	0%, 100% {
		background: var(--luzcolor-eight);
		box-shadow: 0px 4.6666666667px 24px 3px var(--luzcolor-eight);
	}
	50% {
		background: rgba(92, 201, 244, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(92, 201, 244, 0.2);
	}
}