html,
body {
  width: 100%;
  height: 100%;
}

body {
  /* background-color: #140032; */
  background-image: linear-gradient(120deg, #f1ffea 0%, #e7fff7 100%);
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

.galaxy:nth-child(1) {
  transform: translateX(-120px) scale(-1, 1);
}

.galaxy:nth-child(2) {
  transform: translateX(120px) scale(1, -1);
}

.stars {
  width: 200px;
  height: 200px;
}
.stars .circle {
  animation: 5s galaxy ease-in-out infinite reverse;
}
.stars .dot {
  width: 10px;
  height: 10px;
  border: 5px dotted #fff;
}

.stars .dot:nth-child(0) {
  transform: rotate(0deg) translate(120px) scale(1);
  border-color: #1c6f11;
}

.stars .dot:nth-child(1) {
  transform: rotate(12deg) translate(120px) scale(0.96667);
  border-color: #1f6f11;
}

.stars .dot:nth-child(2) {
  transform: rotate(24deg) translate(120px) scale(0.93333);
  border-color: #236f11;
}

.stars .dot:nth-child(3) {
  transform: rotate(36deg) translate(120px) scale(0.9);
  border-color: #276f11;
}

.stars .dot:nth-child(4) {
  transform: rotate(48deg) translate(120px) scale(0.86667);
  border-color: #2a6f11;
}

.stars .dot:nth-child(5) {
  transform: rotate(60deg) translate(120px) scale(0.83333);
  border-color: #2e6f11;
}

.stars .dot:nth-child(6) {
  transform: rotate(72deg) translate(120px) scale(0.8);
  border-color: #326f11;
}

.stars .dot:nth-child(7) {
  transform: rotate(84deg) translate(120px) scale(0.76667);
  border-color: #356f11;
}

.stars .dot:nth-child(8) {
  transform: rotate(96deg) translate(120px) scale(0.73333);
  border-color: #396f11;
}

.stars .dot:nth-child(9) {
  transform: rotate(108deg) translate(120px) scale(0.7);
  border-color: #3d6f11;
}

.stars .dot:nth-child(10) {
  transform: rotate(120deg) translate(120px) scale(0.66667);
  border-color: #406f11;
}

.stars .dot:nth-child(11) {
  transform: rotate(132deg) translate(120px) scale(0.63333);
  border-color: #446f11;
}

.stars .dot:nth-child(12) {
  transform: rotate(144deg) translate(120px) scale(0.6);
  border-color: #486f11;
}

.stars .dot:nth-child(13) {
  transform: rotate(156deg) translate(120px) scale(0.56667);
  border-color: #4b6f11;
}

.stars .dot:nth-child(14) {
  transform: rotate(168deg) translate(120px) scale(0.53333);
  border-color: #4f6f11;
}

.stars .dot:nth-child(15) {
  transform: rotate(180deg) translate(120px) scale(0.5);
  border-color: #536f11;
}

.stars .dot:nth-child(16) {
  transform: rotate(192deg) translate(120px) scale(0.46667);
  border-color: #566f11;
}

.stars .dot:nth-child(17) {
  transform: rotate(204deg) translate(120px) scale(0.43333);
  border-color: #5a6f11;
}

.stars .dot:nth-child(18) {
  transform: rotate(216deg) translate(120px) scale(0.4);
  border-color: #5e6f11;
}

.stars .dot:nth-child(19) {
  transform: rotate(228deg) translate(120px) scale(0.36667);
  border-color: #616f11;
}

.stars .dot:nth-child(20) {
  transform: rotate(240deg) translate(120px) scale(0.33333);
  border-color: #656f11;
}

.stars .dot:nth-child(21) {
  transform: rotate(252deg) translate(120px) scale(0.3);
  border-color: #696f11;
}

.stars .dot:nth-child(22) {
  transform: rotate(264deg) translate(120px) scale(0.26667);
  border-color: #6c6f11;
}

.stars .dot:nth-child(23) {
  transform: rotate(276deg) translate(120px) scale(0.23333);
  border-color: #6f6e11;
}

.stars .dot:nth-child(24) {
  transform: rotate(288deg) translate(120px) scale(0.2);
  border-color: #6f6a11;
}

.stars .dot:nth-child(25) {
  transform: rotate(300deg) translate(120px) scale(0.16667);
  border-color: #6f6711;
}

.stars .dot:nth-child(26) {
  transform: rotate(312deg) translate(120px) scale(0.13333);
  border-color: #6f6311;
}

.stars .dot:nth-child(27) {
  transform: rotate(324deg) translate(120px) scale(0.1);
  border-color: #6f5f11;
}

.stars .dot:nth-child(28) {
  transform: rotate(336deg) translate(120px) scale(0.06667);
  border-color: #6f5c11;
}

.stars .dot:nth-child(29) {
  transform: rotate(348deg) translate(120px) scale(0.03333);
  border-color: #6f5811;
}

.stars .dot:nth-child(30) {
  transform: rotate(360deg) translate(120px) scale(0);
  border-color: #6f5411;
}

.stars .dot:nth-child(31) {
  transform: rotate(372deg) translate(120px) scale(-0.03333);
  border-color: #6f5111;
}

.stars .dot:nth-child(32) {
  transform: rotate(384deg) translate(120px) scale(-0.06667);
  border-color: #6f4d11;
}

.stars .dot:nth-child(33) {
  transform: rotate(396deg) translate(120px) scale(-0.1);
  border-color: #6f4911;
}

.stars .dot:nth-child(34) {
  transform: rotate(408deg) translate(120px) scale(-0.13333);
  border-color: #6f4611;
}

.stars .dot:nth-child(35) {
  transform: rotate(420deg) translate(120px) scale(-0.16667);
  border-color: #6f4211;
}

.stars:nth-child(0) {
  transform: rotate(0deg) translate(80px);
}
.stars:nth-child(0) .circle {
  animation-delay: 0s;
}
.stars:nth-child(1) {
  transform: rotate(18deg) translate(80px);
}
.stars:nth-child(1) .circle {
  animation-delay: -0.25s;
}
.stars:nth-child(2) {
  transform: rotate(36deg) translate(80px);
}
.stars:nth-child(2) .circle {
  animation-delay: -0.5s;
}
.stars:nth-child(3) {
  transform: rotate(54deg) translate(80px);
}
.stars:nth-child(3) .circle {
  animation-delay: -0.75s;
}
.stars:nth-child(4) {
  transform: rotate(72deg) translate(80px);
}
.stars:nth-child(4) .circle {
  animation-delay: -1s;
}
.stars:nth-child(5) {
  transform: rotate(90deg) translate(80px);
}
.stars:nth-child(5) .circle {
  animation-delay: -1.25s;
}
.stars:nth-child(6) {
  transform: rotate(108deg) translate(80px);
}
.stars:nth-child(6) .circle {
  animation-delay: -1.5s;
}
.stars:nth-child(7) {
  transform: rotate(126deg) translate(80px);
}
.stars:nth-child(7) .circle {
  animation-delay: -1.75s;
}
.stars:nth-child(8) {
  transform: rotate(144deg) translate(80px);
}
.stars:nth-child(8) .circle {
  animation-delay: -2s;
}
.stars:nth-child(9) {
  transform: rotate(162deg) translate(80px);
}
.stars:nth-child(9) .circle {
  animation-delay: -2.25s;
}
.stars:nth-child(10) {
  transform: rotate(180deg) translate(80px);
}
.stars:nth-child(10) .circle {
  animation-delay: -2.5s;
}
.stars:nth-child(11) {
  transform: rotate(198deg) translate(80px);
}
.stars:nth-child(11) .circle {
  animation-delay: -2.75s;
}
.stars:nth-child(12) {
  transform: rotate(216deg) translate(80px);
}
.stars:nth-child(12) .circle {
  animation-delay: -3s;
}
.stars:nth-child(13) {
  transform: rotate(234deg) translate(80px);
}
.stars:nth-child(13) .circle {
  animation-delay: -3.25s;
}
.stars:nth-child(14) {
  transform: rotate(252deg) translate(80px);
}
.stars:nth-child(14) .circle {
  animation-delay: -3.5s;
}
.stars:nth-child(15) {
  transform: rotate(270deg) translate(80px);
}
.stars:nth-child(15) .circle {
  animation-delay: -3.75s;
}
.stars:nth-child(16) {
  transform: rotate(288deg) translate(80px);
}
.stars:nth-child(16) .circle {
  animation-delay: -4s;
}
.stars:nth-child(17) {
  transform: rotate(306deg) translate(80px);
}
.stars:nth-child(17) .circle {
  animation-delay: -4.25s;
}
.stars:nth-child(18) {
  transform: rotate(324deg) translate(80px);
}
.stars:nth-child(18) .circle {
  animation-delay: -4.5s;
}
.stars:nth-child(19) {
  transform: rotate(342deg) translate(80px);
}
.stars:nth-child(19) .circle {
  animation-delay: -4.75s;
}
.stars:nth-child(20) {
  transform: rotate(360deg) translate(80px);
}
.stars:nth-child(20) .circle {
  animation-delay: -5s;
}

@keyframes galaxy {
  100% {
    transform: rotate(360deg);
  }
}