/*Não alterar (vai quebrar a responsividade do site)*/

@media (max-width: 950px) {
    header img {
        width: 25%;
    }

    div button {
        width: 60%;
        font-size: 1em;
    }

    div button:hover {
        width: 70%;
        padding: 30px;
        font-size: 1.2em;
    }

    aside li {
        width: 60%;
        font-size: 1em;
    }

    aside li:hover {
        width: 70%;
        padding: 15px;
        font-size: 1.2em;
    }

    article {
        width: 60%;
    }

    #mostrarTabela {
        border: 0;
        width: 60%;
    }
}

@media (max-width: 650px) {
    header img {
        width: 30%;
    }
    div button {
        width: 70%;
    }

    div button:hover {
        width: 80%;
        font-size: 1.1em;

    }

    aside li {
        width: 70%;
    }

    aside li:hover {
        width: 80%;
        font-size: 1.1em;
    }

    article {
        width: 70%;
    }

    #mostrarTabela {
        border: 0;
        width: 70%;
    }
}

@media (max-width: 610px) {
    footer {
        height: 4em;
    }
    /* calcula a altura de 100% da tela e retira a altura completa do footer */
    #app {
        min-height: calc(100dvh - 4em - 20px);
    }
}

@media (max-width: 500px) {
    header img{
        width: 40%;
    }

    header h1 {
        font-size: 1.7em;
    }

    div button {
        width: 90%;
        font-size: 0.8em;
        font-weight: bold;
    }

    div button:hover {
        width: 100%;
        font-size: 13px;
    }



    aside li {
        width: 90%;
        font-size: 0.8em;
        font-weight: bold;
    }

    aside li:hover {
        width: 90%;
        font-size: 13px;
    }

    article {
        width: 90%;
    }

    #mostrarTabela {
        border: 0;
        width: 90%;
    }

}