#root {
  width: 90vmin;
  height:90vmin;
   max-width: 600px;
  max-height: 600px; 
  position: relative;
  overflow: hidden;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer-1 {
  animation: 30s linear rotate infinite;
  transform-origin: 66% 40%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 248, 176, 0.46) 3.96%, rgba(69, 168, 255, 0) 8.33%, rgba(69, 168, 255, 0) 8.33%) 69.5% 37.7%/17.2% 17.2% no-repeat, radial-gradient(ellipse at 50% 50%, #fff8b0 0%, rgba(69, 168, 255, 0) 47.22%) 74.1% 35.6%/33.6% 36.6% no-repeat;
  /* Rays */
}

.layer-2 {
  animation: 20s linear rotate infinite reverse;
  transform-origin: 66% 40%;
  background: radial-gradient(ellipse at 50% 50%, rgba(69, 168, 255, 0) 20%, #09090b 29%) 77.4% 33.8%/40% 40% no-repeat, repeating-conic-gradient(from 15deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 248, 176, 0.51) 2.64%, rgba(69, 168, 255, 0) 5.56%, rgba(69, 168, 255, 0) 5.56%) 69.5% 37.7%/17.2% 17.2% no-repeat;
  /* Rays */
}

.layer-3 {
  animation: 20s linear rotate infinite;
  background: repeating-conic-gradient(from 355deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 198, 69, 0.26) 8.1%, rgba(69, 168, 255, 0) 16.67%, rgba(69, 168, 255, 0) 16.67%) 0 0/100% 100% no-repeat;
  /* Rays */
}

.layer-4 {
  animation: 40s linear rotate infinite reverse;
  background: repeating-conic-gradient(from 355deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 198, 69, 0.26) 2.86%, rgba(69, 168, 255, 0) 5.88%, rgba(69, 168, 255, 0) 5.88%) 0% 0%/100% 100% no-repeat;
  /* Rays */
}

.layer-5 {
  animation: 40s linear rotate infinite;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 198, 69, 0.26) 6.62%, rgba(69, 168, 255, 0) 7.69%, rgba(69, 168, 255, 0) 7.69%) 0% 0%/100% 100% no-repeat;
  /* Rays */
}

.layer-6 {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 248, 176, 0.27) 0%, rgba(69, 168, 255, 0) 63.54%) 67% 39.3%/5.8% 5.8% no-repeat, radial-gradient(ellipse at 50% 50%, rgba(69, 168, 255, 0) 40.28%, rgba(255, 183, 163, 0.05) 52.43%, rgba(69, 168, 255, 0) 63.54%) 68% 38.6%/13% 13% no-repeat, radial-gradient(ellipse at 50% 50%, rgba(255, 248, 176, 0.55) 0%, rgba(69, 168, 255, 0) 63.54%) 66.9% 39.3%/3.4% 3.4% no-repeat, radial-gradient(ellipse at 50% 50%, rgba(255, 248, 176, 0.2) 0%, rgba(69, 168, 255, 0) 66.67%) 70.7% 36.5%/25.6% 25.6% no-repeat, radial-gradient(ellipse at 50% 50%, #09090b 26%, rgba(69, 168, 255, 0) 26.4%) 0% 0%/100% 100% no-repeat, radial-gradient(ellipse at 50% 50%, rgba(255, 212, 148, 0.04) 0%, rgba(69, 168, 255, 0) 69.79%) 0% 0%/100% 100% no-repeat, radial-gradient(ellipse at 50% 50%, rgba(255, 240, 148, 0.11) 0%, rgba(69, 168, 255, 0) 52.43%) 0% 0%/100% 100% no-repeat, radial-gradient(ellipse at 51% 49%, rgba(69, 168, 255, 0) 23.96%, #09090b 40.63%) 0% 0%/100% 100% no-repeat, repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 239, 69, 0.14) 11.04%, rgba(69, 168, 255, 0) 20%, rgba(69, 168, 255, 0) 20%) 0% 0%/100% 100% no-repeat, radial-gradient(ellipse at 52% 48%, rgba(69, 168, 255, 0) 23.96%, #09090b 34.03%) 0% 0%/100% 100% no-repeat, radial-gradient(ellipse at 50% 50%, rgba(255, 185, 147, 0.29) 28%, rgba(69, 168, 255, 0) 30%) 0% 0%/100% 100% no-repeat;
  /* Glow */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}