#preloader {
    background: #151728cc url(../images/ParagonNet_2024.png) no-repeat center center;
    background-size: 5%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 1000000000000;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    color: white;
}

.preloader-text {
    font-weight: 500;
    text-align: center;
    top: 57%;
    position: sticky;
    color: white;
}

.preloader-text-tips {
    font-weight: 500;
    text-align: center;
    top: 57%;
    position: sticky;
    color: white;
    margin-left: 1em;
    margin-right: 1em;
}

#preloader a {
    text-decoration: none;
    color: #007BFF;
}

.preloader-text:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

@media only screen and (max-width: 1200px) {
    #preloader {
        background-size: 10%;
    }
}

@media only screen and (max-width: 800px) {
    #preloader {
        background-size: 10%;
    }
}

@media only screen and (max-width: 600px) {
    #preloader {
        background-size: 15%;
    }
}

@media only screen and (max-width: 400px) {
    #preloader {
        background-size: 20%;
    }
}