@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/anton/v26/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/anton/v26/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/anton/v26/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    min-height: 100vh;
}


.night {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transform: rotateZ(45deg);
  z-index: -1;
  background-color: transparent;
  pointer-events: none;
  overflow: hidden;
}

.shooting_star {
  position: absolute;
  left: -200%;
  top: -200%;
  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 3000ms ease-in-out infinite,
    shooting 3000ms ease-in-out infinite;
}

.shooting_star::before {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  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 3000ms ease-in-out infinite;
}

.shooting_star::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  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 3000ms ease-in-out infinite;
}


.shooting_star:nth-child(1) { top: 10vh; left: -50vw; animation-delay: 1.2s; animation-duration: 4s; }
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after { animation-delay: 1.2s; animation-duration: 4s; }

.shooting_star:nth-child(2) { top: 25vh; left: -80vw; animation-delay: 2.5s; animation-duration: 3.5s; }
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after { animation-delay: 2.5s; animation-duration: 3.5s; }

.shooting_star:nth-child(3) { top: 5vh; left: -20vw; animation-delay: 0.8s; animation-duration: 3s; }
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after { animation-delay: 0.8s; animation-duration: 3s; }

.shooting_star:nth-child(4) { top: 60vh; left: -100vw; animation-delay: 4s; animation-duration: 5s; }
.shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after { animation-delay: 4s; animation-duration: 5s; }

.shooting_star:nth-child(5) { top: 30vh; left: -30vw; animation-delay: 1.8s; animation-duration: 4.2s; }
.shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after { animation-delay: 1.8s; animation-duration: 4.2s; }

.shooting_star:nth-child(6) { top: 40vh; left: -120vw; animation-delay: 5.5s; animation-duration: 3.8s; }
.shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after { animation-delay: 5.5s; animation-duration: 3.8s; }

.shooting_star:nth-child(7) { top: 15vh; left: -70vw; animation-delay: 3s; animation-duration: 4.5s; }
.shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after { animation-delay: 3s; animation-duration: 4.5s; }

.shooting_star:nth-child(8) { top: 70vh; left: -40vw; animation-delay: 2.1s; animation-duration: 3.3s; }
.shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after { animation-delay: 2.1s; animation-duration: 3.3s; }

.shooting_star:nth-child(9) { top: 50vh; left: -90vw; animation-delay: 4.8s; animation-duration: 4s; }
.shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after { animation-delay: 4.8s; animation-duration: 4s; }

.shooting_star:nth-child(10) { top: 20vh; left: -10vw; animation-delay: 1s; animation-duration: 3.7s; }
.shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after { animation-delay: 1s; animation-duration: 3.7s; }

.shooting_star:nth-child(11) { top: 80vh; left: -60vw; animation-delay: 3.5s; animation-duration: 4.1s; }
.shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after { animation-delay: 3.5s; animation-duration: 4.1s; }

.shooting_star:nth-child(12) { top: 10vh; left: -110vw; animation-delay: 6s; animation-duration: 4.8s; }
.shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after { animation-delay: 6s; animation-duration: 4.8s; }

.shooting_star:nth-child(13) { top: 75vh; left: -25vw; animation-delay: 2.3s; animation-duration: 3.9s; }
.shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after { animation-delay: 2.3s; animation-duration: 3.9s; }

.shooting_star:nth-child(14) { top: 45vh; left: -55vw; animation-delay: 1.5s; animation-duration: 3.2s; }
.shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after { animation-delay: 1.5s; animation-duration: 3.2s; }

.shooting_star:nth-child(15) { top: 35vh; left: -130vw; animation-delay: 6.5s; animation-duration: 4.3s; }
.shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after { animation-delay: 6.5s; animation-duration: 4.3s; }

.shooting_star:nth-child(16) { top: 55vh; left: -15vw; animation-delay: 0.5s; animation-duration: 3.6s; }
.shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after { animation-delay: 0.5s; animation-duration: 3.6s; }

.shooting_star:nth-child(17) { top: 65vh; left: -70vw; animation-delay: 3.8s; animation-duration: 4.6s; }
.shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after { animation-delay: 3.8s; animation-duration: 4.6s; }

.shooting_star:nth-child(18) { top: 20vh; left: -95vw; animation-delay: 5s; animation-duration: 3.1s; }
.shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after { animation-delay: 5s; animation-duration: 3.1s; }

.shooting_star:nth-child(19) { top: 50vh; left: -5vw; animation-delay: 1.1s; animation-duration: 4.7s; }
.shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after { animation-delay: 1.1s; animation-duration: 4.7s; }

.shooting_star:nth-child(20) { top: 90vh; left: -80vw; animation-delay: 4.5s; animation-duration: 3.4s; }
.shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after { animation-delay: 4.5s; animation-duration: 3.4s; }


@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(200vw);
  }
}