/* 3d_transform.css */

#platform{
  background-color: rgba(96, 96, 96, 0.95);
  width: 500px; 
  height: 402px;
  margin-left: 1cm;
  border-radius: 20px;
  box-shadow: 1px 2px 10px rgba(204, 204, 204, 0.95),
              44px 44px 24px rgba(204, 204, 204, 0.25);
  transition: 1.0s ease-in-out transform, 0.5s ease-in-out box-shadow;
  transform: translateX(40px) translateY(0px)  rotateX(0deg) rotateZ(0deg);
}

#platform:hover {
  transform: initial;
  transition-duration: 2s;
  transform: translateX(100px) translateY(-24px)  rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  background-image: url("../exercise_03/images/trumppresident.jpg");
  box-shadow: 1px 2px 10px rgba(204, 204, 204, 0.95),
              30px 30px 24px rgba(204, 204, 204, 0.15);
}

#platform p {
  perspective: 200px;
  text-shadow: 2px 2px #001aff;
  text-align: center;
  width: 240px;
  opacity: 0;
  transform: translateX(140px) translateY(0px) rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  transition: 1s ease-in-out opacity, transform;
  box-shadow: 1px 2px 10px rgba(204, 204, 204, 0.95);
  border-radius: 50px 20px;
}

#platform:hover p {
  opacity: 1;
  transition-duration: 5s;
  box-shadow: 5px 8px 20px rgba(182, 209, 83, 0.95);
  transform: translateX(140px) translateY(-60px) rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}