* 
{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: cursive;
  font-size: 14px;
  font-style: italic;
  color: #FFF;
}

h2
{
  font-weight: 700;
  font-size: 30px;
  line-height: 180%;
}

.container
{
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.left-slider
{
  height: 100%;
  width: 35%;
  top: 0;
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

.left-slider > div
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-right: 30px;
}

.bg-one
{
  background-color: #ff055c;
}

.bg-two
{
  background-color: #048ccf;
}

.bg-three
{
  background-color: #cda372;

}

.bg-four
{
  background-color: #4ec7d1;
}

.right_slider
{
  position: absolute;
  height: 100%;
  width: 65%;
  top: 0;
  left: 35%;
  transition: transform 0.5s ease-in-out;
}

.right_slider > div
{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

.bg-img-one
{
  background-image: url(https://images.unsplash.com/photo-1622495506073-56b1152a010c?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80);
}

.bg-img-two
{
  background-image: url(https://images.unsplash.com/photo-1629122271630-2f39ef9ddde8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80);
}

.bg-img-three
{
   background-image: url(https://images.unsplash.com/photo-1629112991277-532a9a10aed6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80);

}

.bg-img-four
{
  background-image: url(https://images.unsplash.com/photo-1629059043756-8d490a565914?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
}

.buttons
{
  position: absolute;
  top: 40%;
  left: 35%;
}

button
{
  width: 45px;
  height: 55px;
  border: 1px solid black;
  color: gray;
  border-radius: 5px; 
}

.right-button
{
  transform: translateX(-100%);
}

button:hover
{
  color: #000;

}