tablet.css

@media screen and (max-width: 896px) {

    /*---------------------------------- Cabeçalho ---------------------------------------------------*/
    #logo {
        width: 20%;
        margin-left: 39%;
    }

    /*---------------------------------- Geral -------------------------------------------------------*/
    html {
        height: 100%;
    }

    main {
        flex-direction: column;
    }

    body {
        height: 100%;
    }

    /*---------------------------------- Entrada de texto --------------------------------------------*/

    .input-texto {
        margin: 8% 20% 0 10%;
        width: 80%;
        background-color: #1F1D36;
    }

    .input-texto::placeholder {
        font-size: 20px;
    }

    .informacao {
        margin-left: 10%;
    }

    /*---------------------------------- Botões da entrada de texto ----------------------------------*/

    .encriptar {
        margin: 0 0 0 10%;
        width: 35%;
    }

    .desencriptar {
        text-align: center;
        margin: 0 0 0 4%;
        width: 40%;
    }

    /*---------------------------------- Caixa de saída de texto -------------------------------------*/

    .output-box {
        margin: 0 0 0 10%;
        width: 80%;
        height: 90%;
    }

    .output-texto {
        background-position-x: 30px;
        background-position-y: center;
        width: 80%;
    }

    /*---------------------------------- Botão de Copiar ---------------------------------------------*/

    #copiar {
        margin: 3% 0 4% 0;
    }
}