@charset "UTF-8";
html {
  background: #123;
  overflow: hidden;
}

.dots-container {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots1::before, .dots2::before, .dots3::before, .dots4::before {
  font: 5vmin/1.3 Serif;
  display: block;
  color: transparent;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  font-size: 52px;
  content: "•";
  mix-blend-mode: screen;
}

.dots1 {
  text-shadow: 0.5337103035em -0.1953204538em 13px hsla(331.0605113612deg, 100%, 50%, 0.9), 1.4225271655em 1.0228249928em 13px hsla(359.2407806898deg, 100%, 50%, 0.9), 1.3279208592em -0.3078008601em 13px hsla(342.8496648273deg, 100%, 50%, 0.9), 1.6847672061em -1.4249714861em 13px hsla(293.6368844862deg, 100%, 50%, 0.9), 2.4584022623em -2.070778997em 13px hsla(278.1289404393deg, 100%, 50%, 0.9), 2.3586151789em 1.7876085708em 13px hsla(0.1741144199deg, 100%, 50%, 0.9);
  animation: 58s -34s move infinite ease-in-out alternate;
}

.dots2 {
  text-shadow: -2.9105090868em -2.9852950665em 13px hsla(326.7079461407deg, 100%, 50%, 0.9), 2.7010474982em 1.0208878691em 13px hsla(323.621510027deg, 100%, 50%, 0.9), -1.5026232387em -2.0822024376em 13px hsla(352.7396628828deg, 100%, 50%, 0.9), -2.8649548211em 1.9420453397em 13px hsla(208.5926597864deg, 100%, 50%, 0.9), 0.7243565408em -1.9922060064em 13px hsla(114.3020966617deg, 100%, 50%, 0.9), -2.6927844547em 2.6816544632em 13px hsla(59.0318514947deg, 100%, 50%, 0.9);
  animation: 92s -56s move infinite ease-in-out alternate;
}

.dots3 {
  text-shadow: -2.182016676em -1.7178019224em 13px hsla(319.6899160598deg, 100%, 50%, 0.9), 1.7365566193em -0.0498201867em 13px hsla(119.368295604deg, 100%, 50%, 0.9), 1.2407202362em 2.4021792592em 13px hsla(346.4756431513deg, 100%, 50%, 0.9), 2.1325219578em -1.8407556175em 13px hsla(234.0586697655deg, 100%, 50%, 0.9), -2.0428428059em -1.2383304181em 13px hsla(284.5367305426deg, 100%, 50%, 0.9), 0.6863387419em -0.1654742809em 13px hsla(153.9700642029deg, 100%, 50%, 0.9);
  animation: 74s -50s move infinite ease-in-out alternate;
}

.dots4 {
  text-shadow: 2.0022110447em 0.4086105331em 13px hsla(92.1864948037deg, 100%, 50%, 0.9), 1.9538011655em -1.2073796726em 13px hsla(41.222141198deg, 100%, 50%, 0.9), 0.1205147468em -2.5074494701em 13px hsla(61.9127112099deg, 100%, 50%, 0.9), 1.6257297891em 2.010156324em 13px hsla(44.3486334305deg, 100%, 50%, 0.9), 0.8076541952em -0.9858957005em 13px hsla(188.556351625deg, 100%, 50%, 0.9), 0.3457534534em 2.7603714384em 13px hsla(274.0186669081deg, 100%, 50%, 0.9);
  animation: 102s -85s move infinite ease-in-out alternate;
}

@keyframes move {
  from {
    transform: rotate(0deg) scale(6) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(9) translateX(20px);
  }
}