.lightrope {
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     position: absolute;
     z-index: 1;
     margin: -4px 0 0 0;
     padding: 0;
     pointer-events: none;
     width: 100%;
}
.lightrope li {
     position: relative;
     animation-fill-mode: both; 
     animation-iteration-count: infinite;
     list-style: none;
     margin: 0;
     padding: 0;
     display: block;
     width: 9px;
     height: 9px;
     border-radius: 50%;
     margin: 8px;
     display: inline-block;
     background: rgba(0, 255, 0, 1);
     box-shadow: 0px 2.3334px 12px 1.5px rgba(0, 255, 0, 1);
     animation-name: flash-1;
     animation-duration: 2s;
     will-change: transform, opacity;
}
.lightrope li:nth-child(2n+1) {
     background: rgba(0, 100, 255, 1);
     box-shadow: 0px 2.3334px 12px 1.5px rgba(0, 100, 255, 1);
     animation-name: flash-2;
     animation-duration: 0.4s;
     will-change: transform, opacity;
}
.lightrope li:nth-child(3n+1) {
     background: rgba(255, 0, 155, 1);
     box-shadow: 0px 2.3334px 12px 1.5px rgba(255, 0, 155, 1);
     animation-name: flash-3;
     animation-duration: 1.2s;
     will-change: transform, opacity;
}

.lightrope li:nth-child(4n+1) {
     background: rgba(255, 0, 0, 1);
     box-shadow: 0px 2.3334px 12px 1.5px rgba(255, 0, 0, 1);
     animation-name: flash-4;
     animation-duration: 1.6s;
     will-change: transform, opacity;
}
.lightrope li:nth-child(5n+1) {
     background: rgba(0, 255, 255, 1);
     box-shadow: 0px 2.3334px 12px rgba(0, 255, 255, 1);
     animation-name: flash-5;
     animation-duration: 1.9s;
     will-change: transform, opacity;
}
.lightrope li:nth-child(6n+1) {
     background: rgba(255, 255, 0, 1);
     box-shadow: 0px 2.3334px 12px 1.5px rgba(255, 255, 0, 1);
     animation-name: flash-6;
     animation-duration: 2.2s;
     will-change: transform, opacity;
}
.lightrope li:nth-child(odd) {
     animation-duration: 1.8s;
     will-change: transform, opacity;
}
.lightrope li:before {
     content: "";
     position: absolute;
     background: #222;
     width: 5px;
     height: 4px;
     border-radius: 2px;
     top: -3.5px;
     left: 2.1px;
}
.lightrope li:after {
     content: "";
     top: -7px;
     left: 4.5px;
     position: absolute;
     width: 33px;
     height: 2.1667px;
     border-bottom: solid #222 2px;
     border-radius: 50%;
}
.lightrope li:last-child:after {
     content: none;
}
.lightrope li:first-child {
     margin-left: 1.5px;
}
@keyframes flash-1 {
0%, 100% {
     background: rgba(0, 255, 0, 1);
     box-shadow: 0px 2.3334px 12px rgba(0, 255, 0, 1);
}
50% {
     background: rgba(0, 247, 165, 0.4);
     box-shadow: 0px 2.3334px 12px rgba(0, 255, 0, 0.4);
}
}
@keyframes flash-2 {
0%, 100% {
     background: rgba(0, 100, 255, 1);
     box-shadow: 0px 2.3334px 12px rgba(0, 100, 255, 1);
}
50% {
     background: rgba(0, 100, 255, 0.4);
     box-shadow: 0px 2.3334px 12px rgba(0, 100, 255, 0.4);
    }
}
@keyframes flash-3 {
0%, 100% {
     background: rgba(255, 0, 155, 1);
     box-shadow: 0px 2.3334px 12px rgba(255, 0, 155, 1);
}
50% {
     background: rgba(255, 0, 155, 0.4);
     box-shadow: 0px 2.3334px 12px rgba(255, 0, 155, 0.4);
}
}
@keyframes flash-4 {
0%, 100% {
     background: rgba(255, 0, 0, 1);
     box-shadow: 0px 2.3334px 12px rgba(255, 0, 0, 1);
}
50% {
     background: rgba(255, 0, 0, 0.4);
     box-shadow: 0px 2.3334px 12px rgba(255, 0, 0, 0.4);
}
}
@keyframes flash-5 {
0%, 100% {
     background: rgba(0, 255, 255, 1);
     box-shadow: 0px 2.3334px 12px rgba(0, 255, 255, 1);
}
50% {
     background: rgba(0, 255, 255, 0.4);
     box-shadow: 0px 2.3334px 12px rgba(0, 255, 255, 0.4);
}
}
@keyframes flash-6 {
0%, 100% {
     background: rgba(255, 255, 0, 1);
     box-shadow: 0px 2.3334px 12px rgba(255, 255, 0, 1);
}
50% {
     background: rgba(255, 255, 0, 0.4);
     box-shadow: 0px 2.3334px 12px rgba(255, 255, 0, 0.4);
}
}