*{
  margin: 0;
  padding: 0;
}
body{
  
  background-image: url(./black.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.container2{
  position: relative;
}

.container2 .wrapper2{
  width: 60vw;
  height: 75vh;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
  margin: 5rem auto;
  overflow: hidden;
}
.container2 .wrapper-holder2{


  display: grid;
  grid-template-columns: repeat(4, 100%);
  height: 100%;
  width: 100%;
  animation: slider 10s ease-in-out infinite forwards;
}

.container2 #sliderimg-1{
  background-image: url(./spike.png);
  background-position: center;
  
}
.container2 #sliderimg-2{
  background-image: url(./kiss.gif);
  background-position: center;
  
}
.container2 #sliderimg-3{
  background-image: url(./home.png);
  background-position: center;
 
}
.container2 #sliderimg-4{
  background-image: url(./home.png);
  background-position: center;
  
  
}

.container2 .button-holder2 .button2{
  background-color: white;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  display: inline-block;
  margin: .3rem;
}

.container2 .button-holder2{
  position: absolute;
  left: 45%;
  bottom: 0%;
}

.button2:hover{
  box-shadow: 0px 0px 7px 4px rgba(0, 255, 255, 0.6);
}

@keyframes slider{
  0%{transform: translateX(0%);}
  10%{transform: translateX(0%);}
  20%{transform: translateX(-100%);}
  30%{transform: translateX(-100%);}
  40%{transform: translateX(-100%);}
  50%{transform: translateX(-200%);}
  60%{transform: translateX(-200%);}
  70%{transform: translateX(-200%);}
  80%{transform: translateX(-300%);}
  90%{transform: translateX(-300%);}
  95%{transform: translateX(-300%);}
  100%{transform: translateX(0%);}

}