* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos generales */
body {
    background-color: #ffdfd3;
    text-align: center;
    margin: 0;
    padding: 0;
    background-size: cover;
    display: flex;
    flex-direction: column;
    
}

/* Título principal */
h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #554851;
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(0deg, #e9a1d1 0%, #ffedf9 100%);
    font-family: Papyrus, fantasy;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

/* Contenedor principal */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;


}

/* Estilo de los cuadros de texto */
.encriptado {
    display: flex;
    gap: 20px;
}

textarea {
    width: 400px;
    height: 350px;
    border: none;
    border-radius: 15px;
    padding: 15px;
    font-size: 1.2em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    resize: none;
    font-weight: bold;
    background-color: #ffffff;
    font-family: Papyrus;
    text-align: center;
    color: #314B79;
}

/*Terminos*/
.terminos p {
    font-size: 0.9em;
    color: #666;
    font-family: Papyrus;
    margin-top: 10px;
}

/* Botones */
.botones {
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

button, input[type="button"] {
    padding: 15px 25px;
    font-size: 1em;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-family: Papyrus;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-encriptar {
    background: #cde2db;
    color: black;
    background: linear-gradient(0deg, #cde2db 0%, #9fecd1 100%);
}
.btn-encriptar:before{
    height: 0%;
    width: 2px;
}
.btn-encriptar:hover{
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

.btn-desencriptar {
    background: #f9c4cc;
    color: black;
    background: linear-gradient(0deg, #f9c4cc 0%, #f59eab 100%);
}
.btn-desencriptar:before{
    height: 0%;
    width: 2px;
}
.btn-desencriptar:hover{
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

.btn-copy{
    background: #ddc7ea;
    color: black;
    background: linear-gradient(0deg, #ddc7ea 0%, #d19af1 100%);
}
.btn-copy:before{
    height: 0%;
    width: 2px;
}
.btn-copy:hover{
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

button:hover, input[type="button"]:hover {
    transform: translateY(-3px);
}

/* Imágenes */
#cinnamoroll {
    width: 250px;
    position: absolute;
    right: 20px;
    top: 20px;
}

#flor, #flor2, #flor3 {
    position: absolute;
}


#flor {
    width: 100px;
    bottom: 200px; /* Flor 1 - la de arriba */
    left: 30px;
}

#flor2 {
    width: 180px;
    bottom: 10px; /* Flor 2 - la de en medio */
    left: 20px;
}

#flor3 {
    width: 100px;
    bottom: 10px; /* Flor 3 - la de abajo */
    left: 210px;
}

.footer{
    font-family: Papyrus;
    font-weight: bold;
    font-size: 0.9em;
    color: #554851;
    padding: 10px;
}

footer{
    display: flex;
    justify-content: center;
    flex-direction: row;
}






 @media screen and (max-width: 768px) {
   
    .encriptado {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;

    }

    textarea{
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

   
    button, input[type="button"] {
        padding: 10px 20px;
        font-size: 0.8em;
        width: 100%;

    }

    .btn-copy, .btn-encriptar, .btn-desencriptar {
        margin: 5px 0;
        width:100%;

    
    }

    #flor,#flor2,#flor3 {
        display:none;
    }
    
    #cinnamoroll {
        width: 101px;
        right: -1px;
        top: 80px;
        
    }

    h1{
        font-size: 1.5em;
        padding: 10px;
    }

 

}