/*Setting color codes to be used*/
:root {
    --violet: #EE82EE;
    --indigo: #4F69C6;
    --blue: #0000FF;
    --green: #00FF00;
    --yellow: #FDFF00;
    --orange: #FF7A00;
    --red: #FF0000;
}

body {
    background-color: #000000;
    color: white;
}

.lights, h1, h4 {
    text-align: center;
}

.lights span {
    font-size: 25px;
    margin: 0 1rem;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: inline-block;
}

/* For each color display */
.lights span.violet {
    background: var(--violet);
    animation: violet 1s infinite; /* animation-name duration iteration-count*/
    animation-delay: -1.4s;
}

.lights span.indigo {
    background: var(--indigo);
    animation: indigo 1s infinite; /* animation-name duration iteration-count*/
    animation-delay: -1.3s;
}

.lights span.blue {
    background: var(--blue);
    animation: blue 1s infinite; /* animation-name duration iteration-count*/
    animation-delay: -1.2s;
}

.lights span.green {
    background: var(--green);
    animation: green 1s infinite; /* animation-name duration iteration-count*/
    animation-delay: -1.1s;
}

.lights span.yellow {
    background: var(--yellow);
    animation: yellow 1s infinite; /* animation-name duration iteration-count*/
    animation-delay: -1.0s;
}

.lights span.orange {
    background: var(--orange);
    animation: orange 1s infinite; /* animation-name duration iteration-count*/
    animation-delay: -0.9s;
}

.lights span.red {
    background: var(--red);
    animation: red 1s infinite; /* animation-name duration iteration-count*/
    animation-delay: -0.8s;
}

/* Animation keyframes for each color
0%, 100%, 50% - When style change should happen 
box offset - h-offset v-offset blur spread color */

@keyframes violet {
    0%, 100% { box-shadow: 0 0 10px 10px var(--violet); } /*This will create a violet blurred spread for 10px aroung the circle span*/
    50% { box-shadow: none; } /* This will create a light blinking effect as at 50% no box shadow will be present*/
}

@keyframes indigo {
    0%, 100% { box-shadow: 0 0 10px 10px var(--indigo); }
    50% { box-shadow: none; }
}

@keyframes blue {
    0%, 100% { box-shadow: 0 0 10px 10px var(--blue); }
    50% { box-shadow: none; }
}

@keyframes green {
    0%, 100% { box-shadow: 0 0 10px 10px var(--green); }
    50% { box-shadow: none; }
}

@keyframes yellow {
    0%, 100% { box-shadow: 0 0 10px 10px var(--yellow); }
    50% { box-shadow: none; }
}

@keyframes orange {
    0%, 100% { box-shadow: 0 0 10px 10px var(--orange); }
    50% { box-shadow: none; }
}

@keyframes red {
    0%, 100% { box-shadow: 0 0 10px 10px var(--red); }
    50% { box-shadow: none; }
}