body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0; /* Un fondo gris claro */
    font-family: Arial, sans-serif;
}
.cuadro {
    /* El estilo del cuadro principal */
    background-color: #63D6F7; /* Fondo azul claro */
    border: 5px solid black;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    height: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.Botones{
 display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    gap: 10px;
   
    

}
.Botones button{
    padding: 20px 20px;
     color: white;
     font-weight: bold;
    font-size: 16px;
}
.generar{
    background-color: #3173F7;
    border: none;
    
}
.generar:hover{
       background-color: #1810A5;
    
}
.copiar{
    background-color: #F7B55A;
    border: none;
}
.copiar:hover{
     background-color:   #CE8C10;
}

hr {
    border: none;
    border-top: 2px solid black;
    margin-top: 25px;
    margin-bottom: 15px;
}
.frase{
    justify-content: center;
    align-items: center;

}

.copia{
   display: none;
  text-align: center;
  font-weight: bold;
  font-size: 1.12rem;
  color: black; /* O el color que prefieras */
 
}
.copia.visible{
    display: block;
}
.frases{
    display: flex;
    flex-direction: column;
    color: black;
    font-weight: bold;  
    font-size: 45px;
    margin-top: 5px; /* Prueba con 5px o 0px */
    
}

.autor{
    display: flex;
    flex-direction: column;
    color: grey;
    font-weight: bold;
    
}