/* No specific styles affecting the body itself, only target specific elements */

/* Base styles for elements that will have the scaling effect */

/* The 'scalable-effect' class will be added by JavaScript to the target elements. */

.scalable-effect {
  display: inline-block;
  /*box-sizing: border-box;*/
  /*margin: 20px;*/
  /*padding: 20px;*/
  /*border: 2px solid #3498db;*/
  /*background-color: #ecf0f1;*/
  text-align: center;
  /*border-radius: 8px;*/
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
  transition: transform 0.3s ease-in-out;
  transform-origin: center center;
}

/* Style for when the element is in the scaled-up state (added by JavaScript on mouseover) */

.scaled-up {
  transform: scale(1.1);
  /*transform: scale(1.25);*/
  /*border-color: #2ecc71;*/
  /*box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);*/
}