/* Kayla Perez ITWP 1050 Homework 4 based on more of my favorite characters from League of Legends */

* {
  margin: 20px; /* Applies 20px on margin on all sides */ 
  background-color:lightgray;
}

/* Rotates and skews the image, as well as changes the bckground color to red */
.rotate {
  background: darkred;  
  text-align: center;
  transform: perspective(400px) rotatex(45deg) skewx(-40deg);
  margin: 5rem auto;
  width: 25rem;
  height: 5rem;

}

/* Sets the margins to 40px and creates a box shadow around the image */
.gif {
    width: 1000px;         
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(117, 0, 0, 0.3);
    display: block;
    margin: 40px auto;
    transition: transform 0.3s ease;
  }

  /* changes the persepctive, scale, and skews the element */
.scale{
  background: lightblue;
  text-align: center;
  transform: perspective(400px) scaleX(4)  skewx(-10deg);
  margin: 5rem auto;
  width: 25rem;
  height: 5rem;
}

/* Translates and skews the image and changes the color blue */
.multi-transform {
  transform: rotate(-5deg) scale(1.1) translateX(20px) skewX(5deg);
  background-color: lightblue;
  color: white;
  padding: 1rem;
  margin: 2rem auto;
  width: 25rem;
  height: auto;
  text-align: center;
}

/* Gifs are on the same row and aligned*/ 
.gif-row {
  display: flex;
  justify-content: space-between; /* Pushes them to opposite sides */
  align-items: center;            /* Keeps them aligned vertically */
  margin: 2rem;
}

/* Sets the image to be the same size and format as the other on the same row*/
.reverse {
  transform: scaleX(-1) translatex(-40px) skewX(-10deg);
  width: 33rem;
  height: 28rem;
}

/* Changes the color of the border */
.transition-effect {
  background-color: darkred;
  transition-property: background-color;
  transition-duration: 1s;
  transition-delay: 0.5s;
}
/* Changes the color of the border when hovered */
.transition-effect:hover {
  background-color: rgb(31, 4, 4);
}

/* footer elements */
.footer {
  text-align: center;
}