main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  gap: 40px;
}

.left, .right {
  text-align: center;
} 

.left {
  display: flex;
  flex-direction: column;
  flex: 1; /* Adjusts the flex-grow value to control width */
  max-width: 30%; /* Limits the maximum width of the left side */
  gap: 20px; /* Adds space between the items */
  padding: 20px; /* Adds space around the items */
}

.right {
  flex: 2; /* Gives the right side more space relative to the left */
}

.word[data-img] {
  cursor: pointer;
  transition: font-size 0.5s ease, font-weight 0.5s ease; /* Smooth transition for font size and weight */
}

.word {
  font-size: 1.8em; /* Adjusts the font size */
  margin: 10px 0; /* Adds vertical spacing */
  padding: 5px 0; /* Optional: Adds padding for touch targets */
}

.word.active {
  cursor: pointer;
  transform: scale(1.1); /* Slightly enlarges words on hover */
  transition: transform 0.3s ease; /* Smooth transition for transform */
}

.word.active {
  animation: enlargeAndBolden 4s ease-in-out forwards;
}

#displayedImage {
  animation: fadeInB 2s ease-out;
  max-width: 100%; /* Increase or adjust as needed for larger display */
  width: auto;
  height: 60vh; /* Ensures aspect ratio is maintained */
  margin-top: 20px; /* Adds space above the image */
  padding-top: 100px;
  padding-bottom: 100px;
}

@keyframes enlargeAndBolden {
  0% {
      transform: scale(1);
      font-weight: normal;
  }
  50% {
      transform: scale(1.5);
      font-weight: normal;
  }
  100% {
      transform: scale(1);
      font-weight: normal;
  }
}  

@keyframes fadeInB {
  from {
      opacity: 0;
      transform: scale(0.9);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

@media screen and (max-width: 1280px) {
  .left {
    max-width: 25%;
  }
}

@media screen and (max-width: 1145px) {
  .left {
    max-width: 20%;
  }
}