:root{--primary-color:hsl(196, 78%, 61%);--secondary-color:hsl(217, 15%, 83%);--success-color:hsl(165, 58%, 55%);--info-color:hsl(214, 79%, 65%);--warning-color:hsl(43, 100%, 66%);--danger-color:hsl(354, 81%, 63%);--primary-color-darker:hsl(196, 68%, 54%);--secondary-color-darker:hsl(215, 13%, 70%);--success-color-darker:hsl(165, 55%, 48%);--info-color-darker:hsl(214, 68%, 58%);--warning-color-darker:hsl(39, 97%, 62%);--danger-color-darker:hsl(354, 67%, 56%);--primary-color-lighter:hsl(196, 78%, 81%);--secondary-color-lighter:hsl(214, 16%, 92%);--success-color-lighter:hsl(165, 58%, 75%);--info-color-lighter:hsl(214, 79%, 85%);--warning-color-lighter:hsl(43, 100%, 86%);--danger-color-lighter:hsl(354, 81%, 83%);--secondary-color-darkest:hsl(215, 11%, 30%);--secondary-color-lightest:hsl(220, 1%, 98%)}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
}

.star {
  --star-color: var(--primary-color);
  --star-tail-length: 6em;
  --star-tail-height: 2px;
  --star-width: calc(var(--star-tail-length) / 6);
  --fall-duration: 9s;
  --tail-fade-duration: var(--fall-duration);
  position: absolute;
  top: var(--top-offset);
  left: 0;
  width: var(--star-tail-length);
  height: var(--star-tail-height);
  color: var(--star-color);
  background: linear-gradient(45deg, currentColor, transparent);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px currentColor);
  transform: translate3d(104em, 0, 0);
  animation: fall var(--fall-duration) var(--fall-delay) linear 1, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out 2;
}
@media screen and (max-width: 750px) {
  .star {
    animation: fall var(--fall-duration) var(--fall-delay) linear 1;
  }
}
.star:nth-child(1) {
  --star-tail-length: 6.07em;
  --top-offset: 0.71vh;
  --fall-duration: 6.295s;
  --fall-delay: 31.613s;
}

.star:nth-child(2) {
  --star-tail-length: 7.01em;
  --top-offset: 16.77vh;
  --fall-duration: 7.356s;
  --fall-delay: 31.793s;
}

.star:nth-child(3) {
  --star-tail-length: 7.37em;
  --top-offset: 30.74vh;
  --fall-duration: 7.323s;
  --fall-delay: 31.879s;
}

.star:nth-child(4) {
  --star-tail-length: 6.75em;
  --top-offset: 22.58vh;
  --fall-duration: 4.154s;
  --fall-delay: 31.304s;
}
.star:nth-child(5) {
  --star-tail-length: 5.99em;
  --top-offset: 33.27vh;
  --fall-duration: 7.946s;
  --fall-delay: 31.317s;
}

.star::before, .star::after {
  position: absolute;
  content: '';
  top: 0;
  left: calc(var(--star-width) / -2);
  width: var(--star-width);
  height: 100%;
  background: linear-gradient(45deg, transparent, currentColor, transparent);
  border-radius: inherit;
  animation: blink 2s linear 1;
}
.star::before {
  transform: rotate(45deg);
}
.star::after {
  transform: rotate(-45deg);
}

@keyframes fall {
  to {
    transform: translate3d(-30em, 0, 0);
  }
}
@keyframes tail-fade {
  0%, 50% {
    width: var(--star-tail-length);
    opacity: 1;
  }
  70%, 80% {
    width: 0;
    opacity: 0.6;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0.6;
  }
}