.slideshow-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden; /* Hides content outside the viewing area */
  border: 2px solid #333;
}

.slideshow-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Smooth transition for the slide effect */
}

.slide {
  flex-shrink: 0; /* Prevents the slides from shrinking */
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.5rem;
}

/* add color on each box */

/* .slide:nth-child(1) { background-color: #f6e58d; }
.slide:nth-child(2) { background-color: #c7ecee; }
.slide:nth-child(3) { background-color: #ffbe76; } */

.controls {
  text-align: center;
  margin-top: 20px;
}