.starting-lights {
    width: 300px;
    background-color: black;
    margin: 0 auto;
    border-radius: 5px;
    padding: 20px;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 2s ease-out;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .starting-lights.fade {
    opacity: 0;
  }
  .light {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: darkred;
  }
  @keyframes onThenOff {
    0% { background-color: red; }
    99% { background-color: red; }
    100% { background-color: darkred; }
  }
  .light1 {
    animation: onThenOff 4s linear forwards;
  }
  .light2 {
    animation: onThenOff 3s linear forwards;
    animation-delay: 1s;
  }
  .light3 {
    animation: onThenOff 2s linear forwards;
    animation-delay: 2s;
  }
  .light4 {
    animation: onThenOff 1s linear forwards;
    animation-delay: 3s;
  }

  .start-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }