/* Adapted from: https://reachmnadeem.wordpress.com/2020/12/07/adding-carousel/ */

/* Carousel Start  */
.carousel_wrapper {
  position: relative;
  width: 500px;
  height: 400px;
  margin: 100px auto 0 auto;
  padding: 5px;
  perspective: 1000px;
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-360deg) translateZ(0px); /* add reverse transformation from the slides */
  animation: swirl 80s steps(10000, end) infinite; /* run `swirl` animation (defined at end of CSS) infitely, with animation
 lasting 40 seconds, and 10,000 steps between the FROM and TO values in the animation for a smooth rotation */
}

.slide {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 500px;
  height: 300px;
}

.slide img {
  width: 400px;
  height: 250px;
  /* border: 3px inset rgba(0, 255, 34, 0.9);
  box-shadow: 0 0 10px 1px rgba(0, 255, 34, 0.9); */
}

.slide.one {
  transform: rotateY(0deg) translateZ(250px);
}
.slide.two {
  transform: rotateY(90deg) translateZ(250px);
}
.slide.three {
  transform: rotateY(180deg) translateZ(250px);
}
.slide.four {
  transform: rotateY(270deg) translateZ(250px);
}

/*
CSS3 ANIMATION
-------------------
Simply rotates the carousel around the Y axis by using rotateY and starting at initial value, -360º, and going to final value 0º,
then resetting.
*/

@keyframes swirl {
  from {
    transform: rotateY(-360deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
/* Carousel Start */