/*para hacer variables*/
:root{
    --color-azul:#0A3871;
    --color-lila:rgb(158,35,158);
    --border-items:5px solid var(--color-lila);
}


.body{
    background:#f3f5fc ;
    font-family: "Inter", sans-serif;

}
/* para aaser header*/

/*header {
      
}*/

.header{
    
    width: 90%;
    margin: auto;
}

.header_home_img{
    margin-top: 40px;
}

/* main*/
.contenedor{
    
    width: 80.5%;
    margin: auto 40px auto auto;
    display:grid;
    grid-template-columns: 2fr 1fr;
    min-height: calc(100vh - 91px - 72px);
    align-items: end;
}

.contenedorEncriptado{
    
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.texto{
    width: 80%;
    font-size: 32px;
    color: #0A3871;
   /*color: var(--color-azul);*/
   background: none;
   resize: none;
   border: none;
   outline: none;
   font-family: "Inter", sans-serif;

}
.texto::placeholder{
    color: #0A3871;
}

/*.instrucciones_botones{
    background-color: burlywood;
}*/
.info_instrucciones{
    font-size: 12px;
    color: #495057;
}
.botones{
    display: flex;
    gap: 24px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.boton_encriptado,
.boton_desencriptado,
.boton_copia{
    border: 1px solid #0A3871;
    max-width: 328px;
    min-width: 160px;
    width: 40%;
    height: 67px;
    border-radius: 24px;
    font-size: 16px;
    cursor: pointer;
}

.boton_encriptado{

    background-color: #0A3871;
    color: white;
   
}

.boton_desencriptado{
    
    background-color: #D8DFE8;
    color:#0A3871 ;
    
}

.encriptado{
    background-color: rgb(255, 255, 255);
    height: calc(100% + 48px);
    border-radius: 32px;
    padding:  32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    align-items: center;
    box-shadow: 0px 24px 32px -8px rgba(0,0,0,0.08);
}

.encriptado.ajustar{
    justify-content: space-between;

}

.munheco{
   width: 100%; 
}

.boton_copia{
    background-color: transparent;
    color: #0A3871;
    width: 100%;
}

.oculto{
    display: none;
}

.mensaje{
    border: none;
    outline: none;
    resize: none;
    background: none;
    text-align: center;
    font-weight: bold;
    font-size: 24px;  
    
}

.mensaje.ajustar{

    text-align: left;
    font-weight: lighter;
    height: 80%;
}

.info{
    font-size: 16px;
    color: #495057;
    text-align: center;

}

footer{
    
    background-color: #f3f5fc;
    padding: 24px;
    color: #495057;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    display:grid;
    grid-template-columns: 1fr 1fr;

}
.creador{
	font-size: 18px;
}
.usuario{
	color: #000;
	font-style: italic;
}
.etc{
    display:grid;
    grid-template-columns: 0fr 0fr;
    
}
.links{
    
	width: 30px;
}


@media screen and (max-width: 770px ) {
    .contenedor{
        grid-template-columns: 1fr;
        grid-template-rows: 75% auto;
        width: auto;
        margin: auto 40px;
    }

    .encriptado{
        height: 100%;
    }
    .botones{
        justify-content: center;
    }
    .boton_encriptado,
    .boton_desencriptado{
        width: 45%;
    }

    .munheco{
        display: none;
    }
    
}

@media screen and (max-width: 500px ){
    .contenedor{
        margin: 16px;
    }

    .boton_encriptado,
    .boton_desencriptado{
        max-width: 100%;
        width: 100%;
    }

}