Background

background.css

html {
    font: 5vmin/1.3 Serif;
    overflow: hidden;
    background: #123; }
  
  body, head {
    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.18657em 0.39514em 7px rgba(255, 0, 101, 0.9), 2.0835em 1.63118em 7px rgba(0, 75, 255, 0.9), 2.43532em -0.3899em 7px rgba(239, 255, 0, 0.9), 1.24641em 0.54307em 7px rgba(0, 255, 206, 0.9), 1.6697em 1.13077em 7px rgba(0, 255, 3, 0.9), -0.44867em 1.04264em 7px rgba(176, 0, 255, 0.9), 0.20293em 1.86918em 7px rgba(91, 0, 255, 0.9), 1.9524em 0.74875em 7px rgba(68, 255, 0, 0.9), 0.86769em 1.92363em 7px rgba(255, 0, 24, 0.9), 1.87224em 1.84598em 7px rgba(76, 0, 255, 0.9), 2.1881em 2.46614em 7px rgba(0, 53, 255, 0.9), 1.73565em 0.55091em 7px rgba(0, 255, 97, 0.9), 0.24231em 0.96792em 7px rgba(0, 157, 255, 0.9), 1.07585em 0.01382em 7px rgba(100, 255, 0, 0.9), 1.08365em -0.45006em 7px rgba(0, 255, 255, 0.9), 2.494em 0.08596em 7px rgba(0, 255, 222, 0.9), 1.13239em -0.32255em 7px rgba(0, 240, 255, 0.9), 1.11348em 0.49335em 7px rgba(0, 250, 255, 0.9), 1.46192em 1.63058em 7px rgba(183, 255, 0, 0.9), -0.03376em -0.00136em 7px rgba(255, 0, 172, 0.9), 0.25684em -0.34391em 7px rgba(255, 0, 105, 0.9), 1.88192em 1.3618em 7px rgba(0, 181, 255, 0.9), 0.16468em 2.47352em 7px rgba(0, 255, 88, 0.9), 2.00401em 2.18471em 7px rgba(67, 0, 255, 0.9), 1.30074em -0.02578em 7px rgba(255, 4, 0, 0.9), -0.07031em 0.97165em 7px rgba(223, 255, 0, 0.9), 0.93909em 0.86972em 7px rgba(255, 43, 0, 0.9), 2.37689em 1.65892em 7px rgba(15, 255, 0, 0.9), 0.5555em 0.36389em 7px rgba(0, 255, 190, 0.9), 0.40963em 1.53493em 7px rgba(255, 112, 0, 0.9), 1.33208em -0.43403em 7px rgba(255, 98, 0, 0.9), 1.17688em 0.25788em 7px rgba(0, 207, 255, 0.9), 2.4801em 2.39329em 7px rgba(0, 157, 255, 0.9), -0.00494em 0.60304em 7px rgba(0, 255, 1, 0.9), 0.1677em 2.06419em 7px rgba(255, 0, 134, 0.9), -0.45459em 2.4242em 7px rgba(162, 255, 0, 0.9), 0.91448em 0.77546em 7px rgba(255, 23, 0, 0.9), -0.27973em 0.0332em 7px rgba(255, 0, 208, 0.9), 0.79433em 0.57375em 7px rgba(0, 114, 255, 0.9), 1.20898em 0.07901em 7px rgba(255, 106, 0, 0.9), -0.30062em 0.40555em 7px rgba(0, 255, 99, 0.9);
    animation-duration: 44s;
    animation-delay: -27s; }
  
  body::after {
    text-shadow: 1.35376em -0.14187em 7px rgba(255, 35, 0, 0.9), -0.01084em 0.8046em 7px rgba(255, 98, 0, 0.9), -0.13334em 1.57314em 7px rgba(255, 0, 72, 0.9), 1.6249em 2.28629em 7px rgba(79, 0, 255, 0.9), 0.54588em 1.11319em 7px rgba(0, 146, 255, 0.9), 1.15414em 2.14951em 7px rgba(255, 180, 0, 0.9), -0.35784em 0.83507em 7px rgba(230, 0, 255, 0.9), 1.00748em 2.40269em 7px rgba(0, 255, 129, 0.9), -0.0026em 1.13129em 7px rgba(154, 255, 0, 0.9), -0.14869em 0.07855em 7px rgba(255, 208, 0, 0.9), 1.23718em 2.47977em 7px rgba(0, 255, 152, 0.9), 2.21038em 1.63116em 7px rgba(77, 0, 255, 0.9), 0.65755em 0.70434em 7px rgba(255, 193, 0, 0.9), -0.44634em 1.9936em 7px rgba(255, 0, 227, 0.9), 0.45038em 1.08966em 7px rgba(255, 0, 104, 0.9), 0.86433em 0.65873em 7px rgba(0, 186, 255, 0.9), -0.41028em 1.30904em 7px rgba(0, 255, 118, 0.9), 0.61322em 2.39217em 7px rgba(0, 2, 255, 0.9), 1.51444em 1.88414em 7px rgba(0, 255, 182, 0.9), -0.04674em 1.81968em 7px rgba(249, 0, 255, 0.9), 1.6129em 0.5488em 7px rgba(255, 0, 207, 0.9), 0.96139em 1.05329em 7px rgba(227, 255, 0, 0.9), 0.45522em 0.861em 7px rgba(255, 0, 164, 0.9), 1.85211em 2.0134em 7px rgba(255, 223, 0, 0.9), 0.12024em -0.48854em 7px rgba(0, 226, 255, 0.9), -0.24658em 2.09316em 7px rgba(139, 0, 255, 0.9), 0.30815em -0.33434em 7px rgba(255, 0, 146, 0.9), 0.18649em 0.13833em 7px rgba(0, 255, 224, 0.9), 0.24994em 0.79018em 7px rgba(0, 255, 43, 0.9), 1.76893em 1.19632em 7px rgba(255, 0, 139, 0.9), 2.1875em 2.31765em 7px rgba(255, 208, 0, 0.9), 1.8341em 0.1964em 7px rgba(0, 255, 160, 0.9), 0.79032em 1.82769em 7px rgba(255, 0, 15, 0.9), 0.80881em -0.49344em 7px rgba(167, 0, 255, 0.9), 1.39046em 1.16625em 7px rgba(0, 255, 250, 0.9), -0.48901em 0.74384em 7px rgba(185, 255, 0, 0.9), 0.91419em 1.17991em 7px rgba(255, 209, 0, 0.9), 1.127em 0.5233em 7px rgba(255, 161, 0, 0.9), -0.32289em 2.38516em 7px rgba(255, 0, 26, 0.9), 1.83729em 2.02371em 7px rgba(255, 108, 0, 0.9), 2.2775em 0.98459em 7px rgba(140, 0, 255, 0.9);
    animation-duration: 43s;
    animation-delay: -32s; }
  
  head::before {
    text-shadow: 0.75559em 2.25078em 7px rgba(163, 255, 0, 0.9), 0.71146em 0.42866em 7px rgba(255, 245, 0, 0.9), 2.26705em 1.77337em 7px rgba(0, 145, 255, 0.9), 0.36917em 0.42247em 7px rgba(0, 231, 255, 0.9), 0.83084em -0.45587em 7px rgba(0, 36, 255, 0.9), 1.43015em 2.30389em 7px rgba(0, 23, 255, 0.9), 0.24267em 1.72855em 7px rgba(15, 255, 0, 0.9), 0.96431em -0.34682em 7px rgba(255, 102, 0, 0.9), 1.873em -0.33764em 7px rgba(255, 0, 23, 0.9), 2.40622em 1.87984em 7px rgba(0, 64, 255, 0.9), 0.55173em 0.50185em 7px rgba(255, 0, 231, 0.9), 1.31263em 0.3575em 7px rgba(0, 255, 124, 0.9), 0.18741em 0.64638em 7px rgba(56, 255, 0, 0.9), 0.32897em 0.03626em 7px rgba(255, 0, 44, 0.9), 0.00859em -0.18027em 7px rgba(114, 255, 0, 0.9), 0.81359em 2.40213em 7px rgba(0, 255, 1, 0.9), -0.35987em 0.24906em 7px rgba(124, 0, 255, 0.9), 1.01085em -0.15224em 7px rgba(255, 0, 149, 0.9), 1.30095em 0.5015em 7px rgba(0, 255, 152, 0.9), 0.24868em -0.10881em 7px rgba(0, 255, 108, 0.9), 1.91636em -0.26244em 7px rgba(32, 0, 255, 0.9), 0.83193em -0.01821em 7px rgba(255, 132, 0, 0.9), 1.20749em -0.48212em 7px rgba(0, 255, 34, 0.9), 0.41981em 0.45671em 7px rgba(67, 255, 0, 0.9), 1.19816em 1.56785em 7px rgba(255, 84, 0, 0.9), 0.19837em 0.27245em 7px rgba(0, 255, 166, 0.9), -0.19917em -0.061em 7px rgba(255, 0, 47, 0.9), -0.21391em 0.26131em 7px rgba(118, 0, 255, 0.9), 0.11962em 1.19464em 7px rgba(255, 0, 196, 0.9), 2.27061em 1.83914em 7px rgba(255, 0, 84, 0.9), 0.9439em 1.21651em 7px rgba(208, 255, 0, 0.9), 2.36124em 1.97293em 7px rgba(255, 217, 0, 0.9), 0.41096em 2.37733em 7px rgba(255, 0, 151, 0.9), 1.63115em 0.63909em 7px rgba(255, 0, 253, 0.9), 1.66289em 1.66174em 7px rgba(128, 0, 255, 0.9), 1.71392em 0.6042em 7px rgba(255, 25, 0, 0.9), 2.49277em 1.81425em 7px rgba(0, 8, 255, 0.9), 0.48752em 0.522em 7px rgba(129, 255, 0, 0.9), 1.19377em 1.17739em 7px rgba(0, 168, 255, 0.9), -0.0642em 0.6549em 7px rgba(61, 0, 255, 0.9), -0.01576em 1.33464em 7px rgba(5, 255, 0, 0.9);
    animation-duration: 42s;
    animation-delay: -23s; }
  
  head::after {
    text-shadow: 2.15032em 1.29682em 7px rgba(0, 57, 255, 0.9), -0.48747em 1.382em 7px rgba(90, 255, 0, 0.9), 2.30891em 2.10406em 7px rgba(0, 63, 255, 0.9), 0.3387em 0.65858em 7px rgba(255, 0, 0, 0.9), -0.33286em -0.39969em 7px rgba(255, 21, 0, 0.9), 2.32274em 1.96045em 7px rgba(0, 255, 209, 0.9), 0.86356em 1.27743em 7px rgba(146, 255, 0, 0.9), 0.1363em 0.58557em 7px rgba(255, 0, 153, 0.9), 0.0115em 1.90785em 7px rgba(188, 0, 255, 0.9), 2.35309em 2.43922em 7px rgba(173, 255, 0, 0.9), 2.1476em 0.63645em 7px rgba(0, 255, 131, 0.9), 0.60194em 0.62861em 7px rgba(255, 0, 29, 0.9), 0.2666em -0.08116em 7px rgba(0, 255, 24, 0.9), 1.02739em 0.02372em 7px rgba(0, 104, 255, 0.9), 2.09427em 0.22698em 7px rgba(79, 0, 255, 0.9), 0.61026em 2.37206em 7px rgba(7, 0, 255, 0.9), 1.43226em 0.77936em 7px rgba(0, 255, 98, 0.9), 1.81528em 0.90363em 7px rgba(237, 0, 255, 0.9), 2.10588em 0.69581em 7px rgba(255, 42, 0, 0.9), -0.323em 0.50986em 7px rgba(50, 255, 0, 0.9), 1.01245em 2.20237em 7px rgba(255, 18, 0, 0.9), 0.40648em 0.86173em 7px rgba(0, 255, 221, 0.9), 2.4446em -0.40016em 7px rgba(227, 0, 255, 0.9), 0.85102em 1.16242em 7px rgba(0, 255, 180, 0.9), 1.56615em 1.57549em 7px rgba(13, 0, 255, 0.9), 1.74381em -0.47541em 7px rgba(0, 158, 255, 0.9), 0.05314em 2.10158em 7px rgba(0, 255, 215, 0.9), 1.94695em 1.52098em 7px rgba(7, 0, 255, 0.9), 0.63814em -0.20859em 7px rgba(255, 0, 69, 0.9), 1.88543em 1.82738em 7px rgba(0, 97, 255, 0.9), 0.42255em 0.56787em 7px rgba(0, 255, 198, 0.9), 0.09378em 1.61722em 7px rgba(255, 128, 0, 0.9), -0.08828em 0.95817em 7px rgba(255, 0, 125, 0.9), 0.47959em 1.20374em 7px rgba(255, 213, 0, 0.9), 2.27244em 0.84424em 7px rgba(39, 0, 255, 0.9), 0.54533em 1.32582em 7px rgba(0, 255, 17, 0.9), -0.01223em 2.14771em 7px rgba(21, 0, 255, 0.9), 0.08759em 2.16397em 7px rgba(0, 110, 255, 0.9), 0.44074em 0.91198em 7px rgba(255, 245, 0, 0.9), 0.05246em 0.99076em 7px rgba(255, 0, 38, 0.9), 2.45216em 1.09737em 7px rgba(255, 0, 230, 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); } }