:root {
    --textcolor:#38aefd;
    --minitextcolor:#fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(ellipse at bottom, #123258 0%, #0c0d13 100%);
    background-position: center;
    overflow: hidden;
  }
  
  .stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    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: #fff;
    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.09em;
    --top-offset: 89.56vh;
    --fall-duration: 8.564s;
    --fall-delay: 3.65s;
  }
  .star:nth-child(2) {
    --star-tail-length: 6.92em;
    --top-offset: 76.69vh;
    --fall-duration: 8.776s;
    --fall-delay: 0.079s;
  }
  .star:nth-child(3) {
    --star-tail-length: 7.24em;
    --top-offset: 40.84vh;
    --fall-duration: 9.03s;
    --fall-delay: 4.641s;
  }
  .star:nth-child(4) {
    --star-tail-length: 6.04em;
    --top-offset: 95.03vh;
    --fall-duration: 10.114s;
    --fall-delay: 1.427s;
  }
  .star:nth-child(5) {
    --star-tail-length: 6.65em;
    --top-offset: 75.95vh;
    --fall-duration: 11.852s;
    --fall-delay: 4.702s;
  }
  .star:nth-child(6) {
    --star-tail-length: 7.31em;
    --top-offset: 12.75vh;
    --fall-duration: 9.323s;
    --fall-delay: 9.614s;
  }
  .star:nth-child(7) {
    --star-tail-length: 5.34em;
    --top-offset: 24.73vh;
    --fall-duration: 11.989s;
    --fall-delay: 9.235s;
  }
  .star:nth-child(8) {
    --star-tail-length: 6.48em;
    --top-offset: 83.33vh;
    --fall-duration: 9.638s;
    --fall-delay: 1.44s;
  }
  .star:nth-child(9) {
    --star-tail-length: 5.5em;
    --top-offset: 38.53vh;
    --fall-duration: 9.06s;
    --fall-delay: 7.257s;
  }
  .star:nth-child(10) {
    --star-tail-length: 7em;
    --top-offset: 73.66vh;
    --fall-duration: 7.422s;
    --fall-delay: 6.43s;
  }
  .star:nth-child(11) {
    --star-tail-length: 5.23em;
    --top-offset: 26.35vh;
    --fall-duration: 11.7s;
    --fall-delay: 3.827s;
  }
  .star:nth-child(12) {
    --star-tail-length: 7.21em;
    --top-offset: 32.39vh;
    --fall-duration: 10.416s;
    --fall-delay: 4.62s;
  }
  .star:nth-child(13) {
    --star-tail-length: 6.42em;
    --top-offset: 75.45vh;
    --fall-duration: 8.496s;
    --fall-delay: 9.106s;
  }
  .star:nth-child(14) {
    --star-tail-length: 6.85em;
    --top-offset: 78.74vh;
    --fall-duration: 7.077s;
    --fall-delay: 3.385s;
  }
  .star:nth-child(15) {
    --star-tail-length: 6.53em;
    --top-offset: 7.94vh;
    --fall-duration: 10.972s;
    --fall-delay: 0.692s;
  }
  .star:nth-child(16) {
    --star-tail-length: 5.66em;
    --top-offset: 53.53vh;
    --fall-duration: 7.612s;
    --fall-delay: 5.275s;
  }
  .star:nth-child(17) {
    --star-tail-length: 5.18em;
    --top-offset: 57.28vh;
    --fall-duration: 7.002s;
    --fall-delay: 3.358s;
  }
  .star:nth-child(18) {
    --star-tail-length: 5.37em;
    --top-offset: 40.25vh;
    --fall-duration: 10.775s;
    --fall-delay: 3.507s;
  }
  .star:nth-child(19) {
    --star-tail-length: 5.11em;
    --top-offset: 92.09vh;
    --fall-duration: 8.49s;
    --fall-delay: 5.856s;
  }
  .star:nth-child(20) {
    --star-tail-length: 7.36em;
    --top-offset: 40.24vh;
    --fall-duration: 8.087s;
    --fall-delay: 7.412s;
  }
  .star:nth-child(21) {
    --star-tail-length: 7.06em;
    --top-offset: 99.63vh;
    --fall-duration: 10.71s;
    --fall-delay: 6.358s;
  }
  .star:nth-child(22) {
    --star-tail-length: 7.2em;
    --top-offset: 72.89vh;
    --fall-duration: 9.555s;
    --fall-delay: 2.514s;
  }
  .star:nth-child(23) {
    --star-tail-length: 6.04em;
    --top-offset: 48.77vh;
    --fall-duration: 7.356s;
    --fall-delay: 0.601s;
  }
  .star:nth-child(24) {
    --star-tail-length: 6.8em;
    --top-offset: 24.41vh;
    --fall-duration: 8.006s;
    --fall-delay: 7.739s;
  }
  .star:nth-child(25) {
    --star-tail-length: 10em;
    --top-offset: 29.56vh;
    --fall-duration: 6.747s;
    --fall-delay: 7.717s;
  }
  
  /*
  Dominikhun250.hu
  */
  
  .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);
  }
  
  @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;
    }
  }
  
  .welcome {
    transition: 5s;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%; 
      background: #ffffff00; 
      backdrop-filter: blur(8px);
      position: absolute;
      cursor: pointer;
  }

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.menubox {
    border-radius: 20px; 
    border: 2px solid #ffffff33;
}

.container h1 {
    text-shadow: 0px 0px 10px var(--textcolor),
                 0px 0px 20px var(--textcolor),
                 0px 0px 40px var(--textcolor),
                 0px 0px 80px var(--textcolor);

    text-align: center;
    color: var(--textcolor);
    font-size: 45px;
}

.container p {
    text-shadow: 0px 0px 10px var(--minitextcolor),
                 0px 0px 20px var(--minitextcolor),
                 0px 0px 40px var(--minitextcolor);

    text-align: center;
    color: #fff;
    font-size: 25px;
}

.container a {
    text-decoration: none;
    margin-top: 15px;
    color: #fff;
    font-size: 30px;
    transition: .3s;
}

.icons i {
    margin-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 25px;
}

.icons a {
    text-decoration: none;
    color: #fff;
    margin-top: 30px;
    font-size: 35px;
    transition: .3s;
}

.icons a:hover {
    transform: scale(1.05);
    filter: drop-shadow(0px 0px 25px rgb(3, 165, 252));
}

.container a:hover {
  transform: scale(1.05);
  filter: drop-shadow(0px 0px 25px rgb(255, 255, 255));
}

i {
    transition: 1.5s;
}

i:hover {
    transform: scale(1.5);
}

.loader {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #001720;
    transition: opacity 0.75s, visibility 0.75s;
}

.loader--hidden {
    opacity: 0;
    visibility: hidden;
}

.loader::after {
    content: "";
    width: 75px;
    height: 75px;
    border: 5px solid #fff;
    border-top-color: #001720;
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}

@keyframes loading {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

.falling-text {
    opacity: 0;
    transition: opacity 2s ease-out, transform 2s ease-out;
    transform: translateY(-50px);
}

.falling-text.show {
    opacity: 1;
    transform: translateY(0);
}