*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
  background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
}

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

.star {
  --star-color: #3f3f3f;
  --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 infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {
  .star {
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  }
}
.star:nth-child(1) {
  --star-tail-length: 7.31em;
  --top-offset: 24.12vh;
  --fall-duration: 11.266s;
  --fall-delay: 0.114s;
}
.star:nth-child(2) {
  --star-tail-length: 6.91em;
  --top-offset: 33.91vh;
  --fall-duration: 6.226s;
  --fall-delay: 0.41s;
}
.star:nth-child(3) {
  --star-tail-length: 5.78em;
  --top-offset: 6.95vh;
  --fall-duration: 6.329s;
  --fall-delay: 1.643s;
}
.star:nth-child(4) {
  --star-tail-length: 5.52em;
  --top-offset: 1.99vh;
  --fall-duration: 6.872s;
  --fall-delay: 6.304s;
}
.star:nth-child(5) {
  --star-tail-length: 6.88em;
  --top-offset: 54.42vh;
  --fall-duration: 6.095s;
  --fall-delay: 6.086s;
}
.star:nth-child(6) {
  --star-tail-length: 6.54em;
  --top-offset: 51.44vh;
  --fall-duration: 10.762s;
  --fall-delay: 1.501s;
}
.star:nth-child(7) {
  --star-tail-length: 6.32em;
  --top-offset: 76.59vh;
  --fall-duration: 9.914s;
  --fall-delay: 9.027s;
}
.star:nth-child(8) {
  --star-tail-length: 7.09em;
  --top-offset: 54.21vh;
  --fall-duration: 6.769s;
  --fall-delay: 6.915s;
}
.star:nth-child(9) {
  --star-tail-length: 5.95em;
  --top-offset: 70.45vh;
  --fall-duration: 8.373s;
  --fall-delay: 4.508s;
}
.star:nth-child(10) {
  --star-tail-length: 6.37em;
  --top-offset: 9.23vh;
  --fall-duration: 8.415s;
  --fall-delay: 9.749s;
}
.star:nth-child(11) {
  --star-tail-length: 7.41em;
  --top-offset: 14.49vh;
  --fall-duration: 11.919s;
  --fall-delay: 0.996s;
}
.star:nth-child(12) {
  --star-tail-length: 5.74em;
  --top-offset: 3.02vh;
  --fall-duration: 10.143s;
  --fall-delay: 4.776s;
}
.star:nth-child(13) {
  --star-tail-length: 5.47em;
  --top-offset: 0.81vh;
  --fall-duration: 6.16s;
  --fall-delay: 1.244s;
}
.star:nth-child(14) {
  --star-tail-length: 6.34em;
  --top-offset: 49.34vh;
  --fall-duration: 11.013s;
  --fall-delay: 2.04s;
}
.star:nth-child(15) {
  --star-tail-length: 5.21em;
  --top-offset: 38.59vh;
  --fall-duration: 10.464s;
  --fall-delay: 4.067s;
}
.star:nth-child(16) {
  --star-tail-length: 6.36em;
  --top-offset: 46.8vh;
  --fall-duration: 11.628s;
  --fall-delay: 2.513s;
}
.star:nth-child(17) {
  --star-tail-length: 5.59em;
  --top-offset: 64.09vh;
  --fall-duration: 7.88s;
  --fall-delay: 0.108s;
}
.star:nth-child(18) {
  --star-tail-length: 6.25em;
  --top-offset: 83.11vh;
  --fall-duration: 9.049s;
  --fall-delay: 3.915s;
}
.star:nth-child(19) {
  --star-tail-length: 7.37em;
  --top-offset: 31.52vh;
  --fall-duration: 11.769s;
  --fall-delay: 2.698s;
}
.star:nth-child(20) {
  --star-tail-length: 6.36em;
  --top-offset: 20.02vh;
  --fall-duration: 8.389s;
  --fall-delay: 8.501s;
}
.star:nth-child(21) {
  --star-tail-length: 5.05em;
  --top-offset: 91.13vh;
  --fall-duration: 7.314s;
  --fall-delay: 9.479s;
}
.star:nth-child(22) {
  --star-tail-length: 5.77em;
  --top-offset: 3.23vh;
  --fall-duration: 8.592s;
  --fall-delay: 2.549s;
}
.star:nth-child(23) {
  --star-tail-length: 6.61em;
  --top-offset: 80.52vh;
  --fall-duration: 6.788s;
  --fall-delay: 3.287s;
}
.star:nth-child(24) {
  --star-tail-length: 5.76em;
  --top-offset: 31.66vh;
  --fall-duration: 6.165s;
  --fall-delay: 4.184s;
}
.star:nth-child(25) {
  --star-tail-length: 6.45em;
  --top-offset: 44.28vh;
  --fall-duration: 8.484s;
  --fall-delay: 1.077s;
}
.star:nth-child(26) {
  --star-tail-length: 5.29em;
  --top-offset: 50.16vh;
  --fall-duration: 9.566s;
  --fall-delay: 8.804s;
}
.star:nth-child(27) {
  --star-tail-length: 6.37em;
  --top-offset: 99.64vh;
  --fall-duration: 10.208s;
  --fall-delay: 5.458s;
}
.star:nth-child(28) {
  --star-tail-length: 5.71em;
  --top-offset: 16.63vh;
  --fall-duration: 8.161s;
  --fall-delay: 8.627s;
}
.star:nth-child(29) {
  --star-tail-length: 6.47em;
  --top-offset: 40.94vh;
  --fall-duration: 10.793s;
  --fall-delay: 0.137s;
}
.star:nth-child(30) {
  --star-tail-length: 5.01em;
  --top-offset: 93.67vh;
  --fall-duration: 8.855s;
  --fall-delay: 0.547s;
}
.star:nth-child(31) {
  --star-tail-length: 5.32em;
  --top-offset: 55.51vh;
  --fall-duration: 8.117s;
  --fall-delay: 7.947s;
}
.star:nth-child(32) {
  --star-tail-length: 6.47em;
  --top-offset: 32vh;
  --fall-duration: 7.529s;
  --fall-delay: 1.42s;
}
.star:nth-child(33) {
  --star-tail-length: 6.13em;
  --top-offset: 82.3vh;
  --fall-duration: 6.674s;
  --fall-delay: 5.601s;
}
.star:nth-child(34) {
  --star-tail-length: 6.38em;
  --top-offset: 62.45vh;
  --fall-duration: 10.38s;
  --fall-delay: 7.124s;
}
.star:nth-child(35) {
  --star-tail-length: 7.21em;
  --top-offset: 46.68vh;
  --fall-duration: 9.573s;
  --fall-delay: 4.559s;
}
.star:nth-child(36) {
  --star-tail-length: 7.3em;
  --top-offset: 95.64vh;
  --fall-duration: 9.676s;
  --fall-delay: 4.634s;
}
.star:nth-child(37) {
  --star-tail-length: 7.2em;
  --top-offset: 56.78vh;
  --fall-duration: 10.83s;
  --fall-delay: 0.096s;
}
.star:nth-child(38) {
  --star-tail-length: 6.19em;
  --top-offset: 0.85vh;
  --fall-duration: 7.767s;
  --fall-delay: 1.048s;
}
.star:nth-child(39) {
  --star-tail-length: 5.28em;
  --top-offset: 0.54vh;
  --fall-duration: 6.106s;
  --fall-delay: 2.62s;
}
.star:nth-child(40) {
  --star-tail-length: 5.8em;
  --top-offset: 40.23vh;
  --fall-duration: 7.666s;
  --fall-delay: 7.334s;
}
.star:nth-child(41) {
  --star-tail-length: 6.57em;
  --top-offset: 94.32vh;
  --fall-duration: 7.92s;
  --fall-delay: 3.976s;
}
.star:nth-child(42) {
  --star-tail-length: 6.16em;
  --top-offset: 48.56vh;
  --fall-duration: 9.244s;
  --fall-delay: 5.946s;
}
.star:nth-child(43) {
  --star-tail-length: 5.01em;
  --top-offset: 92.65vh;
  --fall-duration: 8.959s;
  --fall-delay: 2.537s;
}
.star:nth-child(44) {
  --star-tail-length: 6.13em;
  --top-offset: 59.71vh;
  --fall-duration: 9.488s;
  --fall-delay: 3.339s;
}
.star:nth-child(45) {
  --star-tail-length: 6.36em;
  --top-offset: 69.13vh;
  --fall-duration: 11.484s;
  --fall-delay: 4.95s;
}
.star:nth-child(46) {
  --star-tail-length: 6.98em;
  --top-offset: 27.23vh;
  --fall-duration: 9.773s;
  --fall-delay: 1.174s;
}
.star:nth-child(47) {
  --star-tail-length: 7.47em;
  --top-offset: 67.73vh;
  --fall-duration: 9.229s;
  --fall-delay: 5.848s;
}
.star:nth-child(48) {
  --star-tail-length: 7.29em;
  --top-offset: 10.47vh;
  --fall-duration: 9.654s;
  --fall-delay: 4.666s;
}
.star:nth-child(49) {
  --star-tail-length: 6.65em;
  --top-offset: 0.72vh;
  --fall-duration: 6.101s;
  --fall-delay: 2.416s;
}
.star:nth-child(50) {
  --star-tail-length: 5.16em;
  --top-offset: 35.54vh;
  --fall-duration: 9.37s;
  --fall-delay: 6.359s;
}
.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 infinite;
}
.star::before {
  transform: rotate(45deg);
}
.star::after {
  transform: rotate(-45deg);
}

p {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 4px;
  overflow: hidden;
  color: #fff;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

.wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 50px;
    margin: 20px 0 0;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    animation: translatelogo 1s ease-in-out 1.5s both;
}

.logo img {
    width: 300px;
    opacity: 0;
    animation: reveal 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
}

.bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
  opacity: 0;
  animation: revealbottom 1s ease-in-out 1.5s both;
}

.links {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 25px;
}

.links a {
    text-decoration: none;
    transition: transform 0.1s ease-in-out;
}

.links a:hover {
    transform: scale(1.3);
}

i {
    font-size: 20px;
    color: #00A6FF;
}

@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.4;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0.6;
  }
}
  
@keyframes reveal {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes translatelogo {
  0% {
      transform: translateY(60%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes revealbottom {
  0% {
      transform: translateY(30%);
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(-30%);
      opacity: 1;
  }
}