.stars {
    position: absolute;
    top: 100px;
    left: -420px;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0.7;
    box-shadow: var(--star-list);
    z-index: -1;
    animation: anim-stars 10s linear infinite;
  }

.stars::after{
    content: " ";
    position: absolute;
    z-index: -1;
    opacity: 0.7;
    top: 100px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    box-shadow: var(--star-list);
}

@keyframes anim-stars {
    from {
        transform: translateY(0px);

    }
    to {
        transform: translateY(-50px);
    }
}

@keyframes star-blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 0; }
}
.star-blink {
    z-index: 1;
  -webkit-animation: star-blink .75s alternate infinite ;
  -moz-animation: star-blink .75s alternate infinite;
  -ms-animation: star-blink .75s alternate infinite;
  -o-animation: star-blink .75s alternate infinite;
  animation: star-blink .75s alternate infinite;
}

.logofade {
    animation-name: logofadeout;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    z-index: 2;
  }

@keyframes logofadeout {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }
@media screen and (max-width: 1500px) {
    .logofade {
      width: 70%;
    }
    @keyframes logofadeout {
      from {
        width: 0%;
      }
      to {
        width: 100%;
      }
    }
  }