:root {

  --theme-color-one: #025ba0;

  --theme-color-two: #9bc72b;

  --theme-color-three: #f0c517;

  --theme-color-four: #bf1724;

  --theme-color-five: #5cc9f4;

  --white: #fff;

  --black: #000;

  --grey: #999;

  background: var(--white);
  color: var(--white);
}

@keyframes light-up-theme-color-one {

  0% {

    box-shadow: 0 1px 10px 5px var(--theme-color-one);

  }

  25% {

    box-shadow: 0 1px 15px 5px var(--theme-color-one);

  }

  50% {

    box-shadow: 0 1px 20px 5px var(--theme-color-one);

  }

  75% {

    box-shadow: 0 1px 25px 5px var(--theme-color-one);

  }

  100% {

    box-shadow: none;

  }

}


@keyframes light-up-theme-color-two {

  0% {

    box-shadow: 0 1px 10px 5px var(--theme-color-two);

  }

  25% {

    box-shadow: 0 1px 15px 5px var(--theme-color-two);

  }

  50% {

    box-shadow: 0 1px 20px 5px var(--theme-color-two);

  }

  75% {

    box-shadow: 0 1px 25px 5px var(--theme-color-two);

  }

  100% {

    box-shadow: none;

  }

}


@keyframes light-up-theme-color-three {

  0% {

    box-shadow: 0 1px 10px 5px var(--theme-color-three);

  }

  25% {

    box-shadow: 0 1px 15px 5px var(--theme-color-three);

  }

  50% {

    box-shadow: 0 1px 20px 5px var(--theme-color-three);

  }

  75% {

    box-shadow: 0 1px 25px 5px var(--theme-color-three);

  }

  100% {

    box-shadow: none;

  }

}


@keyframes light-up-theme-color-four {

  0% {

    box-shadow: 0 1px 10px 5px var(--theme-color-four);

  }

  25% {

    box-shadow: 0 1px 15px 5px var(--theme-color-four);

  }

  50% {

    box-shadow: 0 1px 20px 5px var(--theme-color-four);

  }

  75% {

    box-shadow: 0 1px 25px 5px var(--theme-color-four);

  }

  100% {

    box-shadow: none;

  }

}


@keyframes light-up-theme-color-five {

  0% {

    box-shadow: 0 1px 10px 5px var(--theme-color-five);

  }

  25% {

    box-shadow: 0 1px 15px 5px var(--theme-color-five);

  }

  50% {

    box-shadow: 0 1px 20px 5px var(--theme-color-five);

  }

  75% {

    box-shadow: 0 1px 25px 5px var(--theme-color-five);

  }

  100% {

    box-shadow: none;

  }

}

/*body {
  font-family: 'Alatsi', sans-serif;
}*/


.light-bulbs {

  display: flex;

  justify-content: space-between;

  padding: 20px;

  width: 500px;

  margin: 0 auto;

}


.light-bulb {

  border-radius: 50%;

  height: 30px;

  width: 30px;

}


.light-bulb.theme-color-one {

  background: var(--theme-color-one);

}


.light-bulb.theme-color-two {

  background: var(--theme-color-two);

}


.light-bulb.theme-color-three {

  background: var(--theme-color-three);

}


.light-bulb.theme-color-four {

  background: var(--theme-color-four);

}


.light-bulb.theme-color-five {

  background: var(--theme-color-five);

}

.light-bulb {

  /* prior styles go here */

  position: relative;

}


.light-bulb::before {

  content: '';

  position: absolute;

  border: 2px solid #222;

  width: 10px;

  height: 10px;

  background: #222;

  border-top-left-radius: 5px;

  border-top-right-radius: 5px;

  left: 32%;

  top: -8px;

}

.light-bulb::after {

  content: '';

  top: -20px;

  left: 60%;

  position: absolute;

  width: 80px;

  height: 28px;

  border-bottom: 4px solid #222;

  border-radius: 50%;

  z-index: 0;

}


.light-bulb:last-of-type::after {

  border: none;

}

.light-bulb {

  /* prior styles go here */

  animation-duration: 1.1s;

  animation-iteration-count: infinite;

}


.light-bulb.theme-color-one {

  animation-name: light-up-theme-color-one;
  animation-duration: 1.1s;

}


.light-bulb.theme-color-two {

  animation-name: light-up-theme-color-two;
  animation-duration: 1.8s;

}


.light-bulb.theme-color-three {

  animation-name: light-up-theme-color-three;
  animation-duration: 2.1s;

}


.light-bulb.theme-color-four {

  animation-name: light-up-theme-color-four;
  animation-duration: 2.0s;

}


.light-bulb.theme-color-five {

  animation-name: light-up-theme-color-five;
  animation-duration: 1.3s;

}

#lights-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Ensure it appears above everything else */
  pointer-events: none; /* Prevent the lights from interfering with interactions */
}