body {
    display: flex;
    height: 100vh;
    background-color: #f0f0f0;
  }
  

  .box {
    margin-top: 50px;
    width: 100px;
    height: 100px;
    background-color: #3498db;
    transition: transform 0.3s ease;
  }
  

  .box:hover {
    transform: translate(50px, 20px);
  }

  #box2{
    margin-top: 150px;
    width: 100px;
    height: 100px;
    background-color: #34db42;
    transition: transform 0.3s ease;
  }
  #box2:hover {
    transform: rotate(45deg);
}

#box3{
  margin-top: 250px;
  width: 100px;
  height: 100px;
  background-color: #db3434;
  transition: transform 0.3s ease;
}
#box3 img{
  max-width: 100%;
  height: 100%;
}
#box3:hover {
  transform: scale(1.2);
}
#box4{
  text-align: center;
  color: white;
  font-family: 'Times New Roman', Times, serif;
  margin-top: 350px;
  width: 100px;
  height: 100px;
  background-color: #db34bf;
  transition: transform 0.3s ease;
}
#box4:hover {
  transform: skew(20deg);
}

#box5 {
  margin-top: 450px;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease;
  position: relative;
}

#box5:hover {
  transform: rotate(45deg) scale(1.5);
  top: -50px;
  left: 50px;
}