.fire-ball {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1px;
  width: 1px;
  border-radius: 50%;
  background: white;
  z-index: -1;

  box-shadow:
    0 0 360px 180px #ffd54f,    
    0 0 600px 360px #f59e4b,  
    0 0 840px 540px #4b0082;  

  animation: pulse-glow 12s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 360px 180px #ffd54f,
      0 0 600px 360px #f59e4b,
      0 0 840px 540px #4b0082;
  }
  50% {
    box-shadow:
      0 0 420px 210px #ffd54f,
      0 0 700px 420px #f59e4b,
      0 0 980px 630px #4b0082;
  }
}