html, body {
  height: 100%;
}

html {
  height: 100%;
  background-color: #090a0f;
  background: radial-gradient(ellipse at bottom, #1b2735, #090a0f);
  overflow: hidden;
}

body {
  background: transparent;
}

head::before, head::after,
body::before, body::after {
  display: block;
  font-size: 52px;
  color: transparent;
}

head::before, head::after,
body::before, body::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: ".";
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}

body::before {
  text-shadow: 2.0298582351em 0.7313928351em 7px rgba(255, 0, 145, 0.9), 0.5957202285em 0.5590587413em 7px rgba(255, 0, 228, 0.9), 2.1837272885em 0.8677042543em 7px rgba(0, 210, 255, 0.9), 1.334534205em 0.844650893em 7px rgba(255, 0, 7, 0.9), 2.25676098em 2.0542310943em 7px rgba(255, 141, 0, 0.9), 2.0862664248em 1.7770924699em 7px rgba(48, 0, 255, 0.9), -0.2103498908em 1.7858022728em 7px rgba(255, 0, 13, 0.9), -0.0331679232em 1.7491364711em 7px rgba(0, 255, 255, 0.9), 0.0787066424em 1.7560129565em 7px rgba(246, 255, 0, 0.9), 0.9578948854em 0.3760549203em 7px rgba(0, 255, 209, 0.9), 2.1875422631em -0.1049908148em 7px rgba(0, 113, 255, 0.9);
  animation-duration: 44s;
  animation-delay: -27s;
}

body::after {
  text-shadow: 0.6863900797em 2.1418443315em 7px rgba(0, 255, 20, 0.9), -0.1703966923em 0.2219399713em 7px rgba(76, 0, 255, 0.9), 0.9973624792em 0.5736484198em 7px rgba(37, 0, 255, 0.9), 1.9214418464em 1.6631696619em 7px rgba(255, 0, 155, 0.9), 2.183074243em 1.3633373539em 7px rgba(0, 48, 255, 0.9), 0.5423677191em 0.6165448349em 7px rgba(0, 249, 255, 0.9), 0.9501590663em -0.2664908487em 7px rgba(0, 120, 255, 0.9), 1.5877908049em 2.328484834em 7px rgba(120, 255, 0, 0.9), 2.1470038843em 0.1075495157em 7px rgba(0, 32, 255, 0.9), -0.3566099631em 0.7266266671em 7px rgba(245, 255, 0, 0.9), 0.2180382521em 0.9480697213em 7px rgba(0, 255, 98, 0.9);
  animation-duration: 43s;
  animation-delay: -32s;
}

head::before {
  text-shadow: -0.1907153433em -0.0291908862em 7px rgba(255, 0, 198, 0.9), 2.3676730426em -0.0537808959em 7px rgba(255, 0, 207, 0.9), 0.6108921697em 1.2540524314em 7px rgba(0, 255, 116, 0.9), 1.8752685371em 0.0341209987em 7px rgba(255, 223, 0, 0.9), 0.4575026093em -0.1321302343em 7px rgba(19, 0, 255, 0.9), 2.420864926em 0.2030064227em 7px rgba(0, 100, 255, 0.9), 1.8783095158em 0.2632622972em 7px rgba(190, 255, 0, 0.9), 0.820330983em -0.1640986145em 7px rgba(51, 0, 255, 0.9), 1.1770297744em 2.3034998743em 7px rgba(117, 255, 0, 0.9), 1.3310261481em 0.4087100849em 7px rgba(140, 255, 0, 0.9), 0.1756170827em 1.4190299468em 7px rgba(66, 0, 255, 0.9);
  animation-duration: 42s;
  animation-delay: -23s;
}

head::after {
  text-shadow: 0.3841427318em -0.2224632804em 7px rgba(131, 0, 255, 0.9), 0.5828637638em 0.0157060711em 7px rgba(0, 255, 10, 0.9), -0.2241527998em 0.0079297769em 7px rgba(65, 0, 255, 0.9), 2.3026907844em 0.4299362013em 7px rgba(117, 255, 0, 0.9), -0.0253819888em 1.437638091em 7px rgba(0, 123, 255, 0.9), 0.6054225299em 2.3206357559em 7px rgba(0, 255, 169, 0.9), -0.0401890343em 0.6591259972em 7px rgba(0, 255, 172, 0.9), 1.5237469922em 1.5134786814em 7px rgba(255, 137, 0, 0.9), 1.862964793em 2.3146469063em 7px rgba(255, 63, 0, 0.9), 1.1173139em 1.1506153518em 7px rgba(30, 255, 0, 0.9), -0.2153097028em 1.4145096249em 7px rgba(27, 0, 255, 0.9);
  animation-duration: 41s;
  animation-delay: -19s;
}

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