/* Estilo para Tablets */
@media all and (max-width:1090px) {
    /* Cuerpo */
    main {
        flex-flow: row wrap;
    }

    /* Bloque Izquierdo: Encriptador */
    .bloque-izq {
        flex: 1 100%;
        margin-bottom: 4rem;
        padding-left: 0;
    }

    .bloque-izq textarea {
        height: 400px;
    }

    /* Bloque Derecho: Instrucción y Mensaje */
    .bloque-der {
        flex: 1 100%;
    }
    
    /* Instrucción */
    .instruccion {
        padding: 3.5%;
    }

    .instruccion img {
        display: none;
    }

    .textos {
        margin-top: 0;
    }

    /* Mensaje de Resultado */
    .mensaje {
        padding: 3.5%;
    }        
}

/* Estilo para Celular */
@media all and (max-width:700px) {
   /* Cabecera */
    header, main {
        padding: 0 4.5%;
    }

    /* Bloque Izquierdo: Encriptador */
    .bloque-izq textarea {
        width: 100%;
        height: 200px;
    }

    .botones {
        flex-flow: row wrap;
    }
    
    .botones input {
        flex: 1 100%;
    }

    /* Instrucción */
    .instruccion {
        padding: 10%;
    }

    /* Mensaje de Resultado */
    .mensaje {
        padding: 10%;
    }

    .mensaje textarea {
        height: 200px;
        width: 100%;
    }
}