body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  text-align: center;
  padding: 50px;
}

div {
  margin: 30px auto;
  width: 200px;
  height: 100px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  border-radius: 8px;
}

.transition-box {
  background-color: #3498db;
  transition: all 0.5s ease;
}

.transition-box:hover {
  background-color: #2ecc71;
  width: 250px;
  border: 5px solid #27ae60;
  font-size: 20px;
}

.spin-box {
  background-color: #9b59b6;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bounce-box {
  background-color: #e67e22;
}

.bounce-box:hover {
  animation: bounce 1s ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
}

.gradient-box {
  background: linear-gradient(135deg, #ff6b6b, #f7d794);
  color: #333;
  font-size: 18px;
}