/* body, html { height: 100%; }

body { margin: 0; background-color: #000000; }

#bg { 
  background-image: url(star2.png);
  background-repeat: no-repeat;
  animation: rotate 10s linear infinite;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
*/


body {
  background-color: #000000;
  margin: 0;
}

.stars {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 300px; /* set the height to be equal to the .star element */
}

.star {
  position: absolute;
  top: calc(50% - 150px); /* adjust the top position to center the element */
  width: 300px;
  height: 300px;
  border-radius: 150px;
  mix-blend-mode: screen;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
}

.star1 {
  transform: rotate(0deg) translate(0, 0);
  animation-name: star1;
}

.star2 {
  transform: rotate(120deg) translate(0, 0);
  animation-name: star2;
}

.star3 {
  transform: rotate(240deg) translate(0, 0);
  animation-name: star3;
}

@keyframes star1 {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    transform: rotate(90deg) translate(100px, 0);
  }
  100% {
    transform: rotate(180deg) translate(0, 0);
  }
}

@keyframes star2 {
  0% {
    transform: rotate(120deg) translate(0, 0);
  }
  50% {
    transform: rotate(210deg) translate(100px, 0);
  }
  100% {
    transform: rotate(300deg) translate(0, 0);
  }
}

@keyframes star3 {
  0% {
    transform: rotate(240deg) translate(0, 0);
  }
  50% {
    transform: rotate(330deg) translate(100px, 0);
  }
  100% {
    transform: rotate(420deg) translate(0, 0);
  }
}