html {
  height: 100%;
  background: rgba(10, 46, 79, 1.0);
  background: radial-gradient(at center bottom, rgba(10, 46, 79, 1.0), rgba(0, 0, 0, 1.0));
  overflow: hidden;
  --value1 : 0
  --value2 : 0
  --value3 : 0
}

#stars {
  z-index: 2;
  width: 1px;
  height: 1px;
  background: transparent;
  color: #fff;
  box-shadow:var(--value1);
  animation: animStar 40s linear infinite;
}

#stars:after {
  z-index: 2;
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
    color: #fff;
  background: transparent;
  box-shadow: var(--value1);
}

#stars2 {
  z-index: 2;
  width: 2px;
  height: 2px;
  background: transparent;
  color: #fff;
  box-shadow:var(--value2);
  animation: animStar 100s linear infinite;
}

#stars2:after {
  z-index: 2;
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
    color: #fff;
  background: transparent;
  box-shadow: var(--value2);
}

#stars3 {
  z-index: 2;
  width: 3px;
  height: 3px;
  background: transparent;
  color: rgba(255,255,255, 0.5);
  border-radius:50%;
  box-shadow:var(--value3);
  animation: animStar 150s linear infinte;
}

#stars3:after {
  z-index: 2;
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
    color: rgba(255,255,255, 0.5);
    border-radius:50%;
  background: transparent;
  box-shadow: var(--value3);
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}