.pagina{

  background-image: url("https://www.cambioclimatico.org/sites/default/files/monthlymeant.gif");
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-attachment: fixed;
}


.tittle{

color: white;

}




  .chat-card {
    width: 300px;
    background-color:transparent;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   
  }
  
  .chat-header {
    padding: 10px;
    background-color: black;
    display: flex;
    align-items: center;
  }
  
  .chat-header .h2 {
    font-size: 16px;
    color: #333;
  }
  
  .chat-body {
    padding: 20px;
  }
  
  .message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
  }
  
  .incoming {
    background-color: #e1e1e1;
  }
  
  .outgoing {
    background-color: #C7C1BF;
    text-align: right;
  }
  
  .message p {
    font-size: 14px;
    color: #333;
    margin: 0;
  }
  
  .chat-footer {
    padding: 10px;
    background-color: black;
    display: flex;
  }
  
  .chat-footer input[type="text"] {
    flex-grow: 1;
    padding: 5px;
    border: none;
    border-radius: 3px;
  }
  
  .chat-footer button {
    padding: 5px 10px;
    border: none;
    background-color: #4285f4;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .chat-footer button:hover {
    background-color: #0f9d58;
  }
  
  @keyframes chatAnimation {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .chat-card .message {
    animation: chatAnimation 0.3s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0.1s;
  }
  
  .chat-card .message:nth-child(even) {
    animation-delay: 0.2s;
  }
  
  .chat-card .message:nth-child(odd) {
    animation-delay: 0.3s;
  }
  
  #reset-button{

    position: relative;
    background-color: rgb(230, 34, 77);
    border-radius: 5px;
    box-shadow: rgb(121, 18, 55) 0px 4px 0px 0px;
    padding: 15px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    width: 104px;
    height: 40px;
    color: #fff;
    border: none;
    font-size: 10px;
    transition: all .3s ease-in-out;
    z-index: 1;
    overflow: hidden;
    transform: translate( 90%, 1%);
     

  }

  #reset-button::before{

    content: "";
    background-color: rgb(248, 50, 93);
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 700ms ease-in-out;
    display: inline-block;


  }

  #reset-button:hover::before{
    width: 100%;

  }