.message-container {
      position: absolute;
      bottom: 40%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 80%;
      height: 200px; /* Fixed height for the container */
      text-align: center;
      z-index: 10;
      display: flex;
      flex-direction: column; /* Stack elements vertically */
      justify-content: space-between; /* Space out elements */
      align-items: center; /* Center items horizontally */
    }
    .message {
      padding: 3%;
      border-radius: 10px;
      display: inline-block;
      width: 90%;
      margin: auto;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 1.2em; /* Decreased font size for chunks */
      font-weight: bold; /* Bold font for emphasis */
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.5s ease;
      flex-grow: 1; /* Allow the message box to grow and fill space */
      display: flex; /* Flexbox for message text */
      align-items: center; /* Center text vertically */
      justify-content: center; /* Center text horizontally */
      font-style: italic;
    }
    p {
      margin-bottom: 1em;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .caret {
      cursor: pointer; /* Pointer cursor for caret icons */
      color: rgba(0, 0, 0, 0.6); /* Slightly transparent white for visibility */
      font-size: 2em; /* Size of the caret icons */
      opacity: 0.7; /* Slight transparency */
      transition: opacity 0.3s ease; /* Smooth opacity change */
    }
    .caret:hover {
      opacity: 1; /* Full opacity on hover */
    }

    /* Bounce Animation */
    @keyframes bounce-up {
      0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
      }
      40% {
        transform: translate(-50%, -20px);
      }
      60% {
        transform: translate(-50%, -10px);
      }
    }
    @keyframes bounce-down {
      0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
      }
      40% {
        transform: translate(-50%, 20px);
      }
      60% {
        transform: translate(-50%, 10px);
      }
    }