#result {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out, opacity 1s ease-out, margin-top 1s ease-out;
  opacity: 0;
  text-align: center;
}

#result.show {
  max-height: 200px; /* Adjust this value based on your content */
  opacity: 1;
  margin-top: 0rem;
}

#result.style1 {
  background-color: #6fc3df;
}

#result.style2 {
  background-color: #8d82c4;
}

#result.style3 {
  background-color: #ec8d81;
}

#result.style4 {
  background-color: #e7b788;
}

#result.style5 {
  background-color: #8ea9e8;
}

#result.style6 {
  background-color: #87c5a4;
}