estilo.css

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

body{
    background:linear-gradient(to left top,#4e7fbb,#823b91c2);
    margin: 1.8rem;
    font-family: 'Inter', monospace;
    animation-name: abrir;
    animation-duration: 5s;
    animation-direction: normal;
    animation-fill-mode:none;
    animation-iteration-count: 1;
}
/* Animacion de entrada del programa */
@keyframes abrir
{
    0%
    {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #071018;
        opacity: 0%;
    }
    
    50%
    {
        top:50%;
        left:50%;
        right:50%;
        bottom:50%;
        background-color: #07101881;
        opacity: 50%;
    }
    100%
    {
        background-color: inherit;
        opacity: 100%;
    }
}


/* Barra con logo en TOP */

.nav
{
    display: flex;
    align-self: baseline;
    margin: 30px;
    padding: 10px;
}

/* contenedor principal: Main */

.mainOne
{
    display: flex;
    flex-direction: row;
    gap: 10rem;

}

/* contenedor de textarea de (INPUT - Alert Minusculas y acentos - BOTONES encriptar/desencriptar) */

.mainOne__areaIngreso
{
    display: flex;
    flex-direction: column;
}

/* Clase de caja de INPUT  */

.box__Encriptacion
{
    /*background-color: #F3F5FC;*/
    display: flex;
    justify-content: center;
    /*position: absolute;*/
    width: 680px;
    height: 288px;
    left: 240px;
    top: 168px;
    
}


/* ID textarea INPUT  */

#textoAencriptar
{
    background-color: inherit;
    border: none;
    resize: none;
    min-width: 400px;
    min-height: 300px;
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 25px;
}
/* MENSAJE DENTRO DE TEXTAREA */

::placeholder
{
    color: #071018;
    font-family: 'ABeeZee', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 150%;
}


/* Alerta minusculas y caracteres especiales */

.advertencia__Descrip
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 1rem;
}
/* Separacion entre icono alerta y texto */
#advertencia__parrafo
{
    font-family: 'ABeeZee', sans-serif;
    font-weight: bold;
    font-size: 13px;
    padding-left: .4rem;
}

/* contenedor botones Encriptar y Desencriptar */

.box__Botones
{
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    gap: 1rem;
}

/* ID BOTON ENCRIPTAR */
.box__Botones #encriptao
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;

    background: #a77e4c;
    position: static;
    width: 328px;
    height: 67px;
    left: 0px;
    top: 0px;
    border: 1px ridge #0a3871c9;
    border-radius: 24px;

    /*Texto del Boton*/
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    
}

#encriptao:hover
{
    background-color: #e71414;
    width: 330px;
    height: 70px;
}

/* ID BOTON ENCRIPTAR */
.box__Botones #desencriptao
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;

    background: #f06136;
    position: static;
    width: 328px;
    height: 67px;
    left: 352px;
    top: 0px;


    
    border: 1px ridge #0a3871c9;
    border-radius: 24px;

    /*texto del boton*/
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
}

#desencriptao:hover
{
    background-color: #838383;
    width: 330px;
    height: 70px;
}
/*Contenedor de Aside: Caja de resultado de encriptacion/desencriptacion - Imagen de muñeco y "No hay ningun mensaje" */
.box__Desencriptacion
{
    
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 940px;
    margin-top: -80px 0 0 40px;
    
}
/* CAJA de Texto Desencriptado/Encriptado */
.box__Desencriptacion #areaTextOut
{
        background-color: inherit;
        border: none;
        resize: none;
        width: 400px;
        height: 300px;
        text-align: center;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 25px;
}
/* Area imagen muñeco y frase debajo de la imagen */
.box__areaVacia
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#box__sub
{
    display: flex;
    flex-direction: column;
    /*margin: 10px 0 10px 0;*/
}

/*ID de boton de Copiar en Portapapeles */
#botonCopiar
{
    
    
    padding: 24px;

    background: #D8DFE8;
    position: static;
    width: 328px;
    height: 67px;
    left: 352px;
    top: 0px;


    
    border: 1px solid #0A3871;
    border-radius: 24px;

    /*texto del boton*/
    font-family: 'Inter', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
}


footer
{
    
    background-color: inherit;
    position: relative;
    text-align: center;
    margin: 2rem 0 2rem 0;
    border-radius:  0.3rem;
}

footer #footer__text
{
    display: block;
    flex-direction: row;
    justify-content: center;
    font-family: 'ABeeZee', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    
}

footer a svg
{
    display: inline-flex;
    align-items: center;
    max-width: 40px;
    max-height: 40px;
}




/*clases OCULTAR- APARECER */
.ocultar
{
    display: none;
}

.habilitar
{
    display: initial;
}