[CSS] Lots of stars spinning around your pfp

IT FITS PERFECTLY ON THE ACTUAL PROFILE PAGE!

Feel free to comment or kudos if you used!

<script>

.general-about .profile-pic {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: visible;
}

.general-about .profile-pic img {
  border-radius: 50%;
  display: block;
}

 /* stars */
.general-about .profile-pic::before {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: transparent;
  pointer-events: none;
  user-select: none;
  z-index: 10;
  animation: spinStars 15s linear infinite;

  /* star positions */
  text-shadow:
    80px 0 #FFB6C1,
    69.28px 40px #FFB6C1,
    40px 69.28px #FFB6C1,
    0 80px #FFB6C1,
    -40px 69.28px #FFB6C1,
    -69.28px 40px #FFB6C1,
    -80px 0 #FFB6C1,
    -69.28px -40px #FFB6C1,
    -40px -69.28px #FFB6C1,
    0 -80px #FFB6C1,
    40px -69.28px #FFB6C1,
    69.28px -40px #FFB6C1;
  filter: drop-shadow(0 0 6px #F8E88A) drop-shadow(0 0 3px #FFF);
  opacity: 0.8;
  animation: spinStars 20s linear infinite, twinkle 3s ease-in-out infinite alternate;
}

@keyframes spinStars {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes twinkle {
  0%   { opacity: 0.7; filter: drop-shadow(0 0 5px #F8E88A); }
  100% { opacity: 1;   filter: drop-shadow(0 0 10px #FFF5F8) drop-shadow(0 0 4px #FFB6C1); }
}

</script>