#live-bg {
  background: #263238;
}

#live-bg,
.layer {
  width: 100%;
  height: 100vh;
  position: absolute;
  /* z-index: -1; */
}

#bg-layer2 {
  opacity: 0.3;
  background: url("../img/livebg/bg-gradient.webp") no-repeat center center / cover;
}

#bg-layer1 {
  opacity: 0.5;
  background: url("../img/livebg/bg-clouds.webp") no-repeat center center / cover;
}

#bg-layer3 {
  background: url("../img/livebg/background2.webp") no-repeat center center / cover;
}

/*Gwiazdy*/
#particles-js {
  height: 50vh;
}

/*Meteory*/
.meteors {
  position: absolute;
  width: 100%;
  height: 70vh;
}

.meteor {
  border: 2px solid transparent;
  border-bottom: 60px solid #fff;
  position: absolute;
  transform-origin: top right;
  animation: shower 0.5s;
  opacity: 0;
}

.meteor:after {
  content: '';
  position: absolute;
  top: 58px;
  left: 50%;
  height: 4px;
  width: 4px;
  border-radius: 100%;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 15px 0 #fff;
}

.meteor:nth-child(0) {
  left: 90vw;
  top: 47vh;
  animation-delay: 15s;
}

.meteor:nth-child(1) {
  left: 81vw;
  top: 3vh;
  animation-delay: 9s;
}

.meteor:nth-child(2) {
  left: 39vw;
  top: 14vh;
  animation-delay: 4s;
}

.meteor:nth-child(3) {
  left: 51vw;
  top: 25vh;
  animation-delay: 12s;
}

.meteor:nth-child(4) {
  left: 20vw;
  top: 5vh;
  animation-delay: 14s;
}

@keyframes shower {
  0% {
    transform: rotate(30deg) scaleY(0);
    opacity: 0;
  }

  20% {
    transform: rotate(30deg) scaleY(1);
    opacity: 1;
  }

  100% {
    transform: rotate(30deg) scaleY(1) translateY(500%);
    opacity: 0;
  }
}