* {
  margin: 0;
  padding: 0;
}

.slideshow-wrapper {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s;
  background-color: #000;
}

.slide img {
  opacity: 0.6;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.arrows-visibility {
  opacity: 0;
}

.control:hover {
  opacity: 1;
}

.control {
  position: absolute;
  top: 0;
  width: 15vw;
  height: 100vh;
  background-color: rgba(92, 94, 97, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.5s linear;
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}

.line {
  width: 0.2rem;
  height: 10rem;
  background-color: rgb(221, 213, 213);
}

.line-1 {
  transform: rotate(20deg) translateY(0.35rem);
}

.line-2 {
  transform: rotate(-20deg) translateY(-0.35rem);
}

.line-3 {
  transform: rotate(-20deg) translateY(0.35rem);
}

.line-4 {
  transform: rotate(20deg) translateY(-0.35rem);
}

.play-pause {
  cursor: pointer;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.play-pause i {
  color: #ffffff;
  font-size: 50px;
}