/* carousel */

.carousel {
  position: relative;
  width: 800px;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-main {
  width: 280px;
  height: 320px;
}

.slider {
  width: inherit;
  height: inherit;
  text-align: center;
  display: inline-block;
}

.slider h1 {
  text-transform: uppercase;
}

.slider-img {
  width: inherit;
  height: 250px;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.2);
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.8));
}

.slider-img-test {
  background-image: url('../assets/icons/cover/test.png');
}

.slider-img-games {
  filter: invert(1);
  background-image: url('../assets/icons/cover/test.png');
}

.slider-img-racing {
  background-image: url('../assets/icons/cover/racing.png');
}

.slider-img-space {
  filter: invert(1);
  background-image: url('../assets/icons/cover/racing.png');
}

.carousel-controls {
  position: absolute;
  top: 53%;
  left: 50%;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, -50%);
}

.carousel-controls input {
  padding: 0 16px;
}


/* carousel animation */

.slidePrev {
  animation: slidePrev 500ms;
}

.slideNext {
  animation: slideNext 500ms;
}

@keyframes slidePrev {
  0% {
    opacity: 0;
    transform: translateX(120px) rotate3d(1, 1, 1, -13deg);
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideNext {
  0% {
    opacity: 0;
    transform: translateX(-120px) rotate3d(1, 1, 1, 13deg);
  }
  100% {
    opacity: 1;
  }
}