User:Yb30

<style>body {

 background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
 height: 100vh;
 overflow: hidden;
 display: flex;
 font-family: 'Anton', sans-serif;
 justify-content: center;
 align-items: center;

}

$shooting-time: 3000ms;

.night {

 position: relative;
 width: 100%;
 height: 100%;
 transform: rotateZ(45deg);
 // animation: sky 200000ms linear infinite;

}

.shooting_star {

 position: absolute;
 left: 50%;
 top: 50%;
 // width: 100px;
 height: 2px;
 background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
 border-radius: 999px;
 filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
 animation:
   tail$ (Error compiling LaTeX. Unknown error_msg)shooting-time ease-in-out infinite,
   shooting $shooting-time ease-in-out infinite;
 
 &::before {
   content: '';
   position: absolute;
   top: calc(50% - 1px);
   right: 0;
   // width: 30px;
   height: 2px;
   background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
   transform: translateX(50%) rotateZ(45deg);
   border-radius: 100%;
   animation: shining$ (Error compiling LaTeX. Unknown error_msg)shooting-time ease-in-out infinite;
 }

 &::after {
   // CodePen Error
   // @extend .shooting_star::before;
   
   content: ;
   position: absolute;
   top: calc(50% - 1px);
   right: 0;
   // width: 30px;
   height: 2px;
   background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
   transform: translateX(50%) rotateZ(45deg);
   border-radius: 100%;
   animation: shining $shooting-time ease-in-out infinite;
   transform: translateX(50%) rotateZ(-45deg);
 }
 
 @for$ (Error compiling LaTeX. Unknown error_msg)i from 1 through 20 {
   &:nth-child(#{$i}) {$ (Error compiling LaTeX. Unknown error_msg)delay: random(9999) + 0ms;
     top: calc(50% - #{random(400) - 200px});
     left: calc(50% - #{random(300) + 0px});
     animation-delay: $delay;
     // opacity: random(50) / 100 + 0.5;
     
     &::before,
     &::after {
       animation-delay:$ (Error compiling LaTeX. Unknown error_msg)delay;
     }
   }
 }

}

@keyframes tail {

 0% {
   width: 0;
 }
 
 30% {
   width: 100px;
 }
 
 100% {
   width: 0;
 }

}

@keyframes shining {

 0% {
   width: 0;
 }
 
 50% {
   width: 30px;
 }
 
 100% {
   width: 0;
 }

}

@keyframes shooting {

 0% {
   transform: translateX(0);
 }
 
 100% {
   transform: translateX(300px);
 }

}

@keyframes sky {

 0% {
   transform: rotate(45deg);
 }
 
 100% {
   transform: rotate(45 + 360deg);
 }

}

</style>