.glow {
  font-size: 80px;
  color: #b9d7ff;
  text-align: center;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eaeaea, 0 0 20px #f6f6f6, 0 0 25px #f6f6f6, 0 0 30px #ffffff, 0 0 35px #edf0f3;
}

.glow2 {
  color: #7979ff;
  text-align: center;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eaeaea, 0 0 20px #f6f6f6, 0 0 25px #f6f6f6, 0 0 30px #ffffff, 0 0 35px #edf0f3;
}

#carousel {
  height: 89vh;
  margin: 0;
  overflow: hidden;
}

.carousel-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: rgb(143, 201, 255); 
  z-index: 999;
}


.carousel-img {
  width: 100%;
  height: 89%;
  object-fit: cover;
  position: absolute;
  opacity: 0;
  -webkit-animation-name: css-animation-fade;
  -webkit-animation-duration: 43s;
  opacity:0;
  -webkit-animation-iteration-count: infinite;
}
/*Getting the timing right, the first image will start at 0s so I don't need to define that. Next at 5s, and so forth with equal intervals*/

#carousel .carousel-img:nth-child(2) {
    -webkit-animation-delay: 3s;
}

#carousel .carousel-img:nth-child(3) {
    -webkit-animation-delay: 8s;
}
#carousel .carousel-img:nth-child(4) {
    -webkit-animation-delay: 13s;
}
#carousel .carousel-img:nth-child(5) {
    -webkit-animation-delay: 18s;
}

#carousel .carousel-img:nth-child(6) {
  -webkit-animation-delay: 23s;
}

#carousel .carousel-img:nth-child(7) {
  -webkit-animation-delay: 28s;
}
#carousel .carousel-img:nth-child(8) {
  -webkit-animation-delay: 33s;
}
#carousel .carousel-img:nth-child(9) {
  -webkit-animation-delay: 38s;
}

/*Here is the actual animation. Just changing opacity. Could also slide to left or right, etc.*/

@-webkit-keyframes css-animation-fade{
    from { opacity:0;}
    5% {opacity: 1;}
    15% {opacity: 1;}
    20% {opacity: 0;}
    to {opacity: 0;}
}