*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.carousel {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.carousel > ul {
  /* by default the ul s have margins and paddings around them which causes the scrollbars to appear with spacing on the top */
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 200ms opacity ease-in-out;
  transition-delay: 200ms;
  /* set transition-delay to 0ms on the active slide (below) */
}

.slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide[data-active] {
  opacity: 1;
  z-index: 1;
  /* transition-delay here makes transition move instantly, the trick is to set the .slide to so, there will be no white background shown in transition from one image to the next
  transition: 200ms opacity ease-in-out;
  transition-delay: 200ms;  */
  transition-delay: 0ms;
}

.carousel-counter {
  width: 150px;
  height: 75px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-bottom: 0;
}

.slide-counter {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
}

.slide-number {
  font-size: 40px;
}
.slide-slash {
  font-size: 30px;
}
.slide-text {
  position: absolute;
  bottom: 10%;
  left: 0;
  background-color: white;
  padding: 0.5rem 2rem;
  opacity: 0.8;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 4rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
}

.carousel-button:hover,
.carousel-button:focus {
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
}

.carousel-button:focus {
  outline: 1px solid black;
}

.carousel-button.prev {
  left: 1rem;
}

.carousel-button.next {
  right: 1rem;
}

@media only screen and (max-width: 1280px) {
  .carousel,
  .slide > img {
    height: 731px;
  }
}
@media only screen and (max-width: 1001px) {
  .carousel,
  .slide > img {
    height: 563px;
  }
  .slide-text {
    padding: 0rem 1rem;
  }
}

@media only screen and (max-width: 52em) {
  .slide-text {
    position: initial;
  }
}
@media only screen and (max-width: 601px) {
  .carousel,
  .slide > img {
    height: 336px;
  }
}