/* tamanho de tela mobile */
@media only screen and (max-width: 600px) {

    /* top bar */
    header {
        /* cor e tamanho */
        background-color: var(--default-blue);
        width: 100vw;
        height: 70px;
        z-index: 1000;
        /* alinha os itens */
        display: flex;
        align-items: center;
        justify-content: space-between;

        /* coloca padding horizontal de 14px */
        padding: 0 14px;
        position: fixed;
        top: 0;
        transition: top 0.2s ease-in-out;
    }

    .nav-up {
        top: -70px;
    }

    /* logo na esquerda da top bar */
    .logo {
        width: 160px;
        padding: 2px 6px 2px 0px;
        background-color: rgba(255, 255, 255, 0.575);
        border-radius: 6px;
    }

    /* menu do desktop */
    header #menu {
        display: none;
    }

    /* botão drawer */
    header #btn-mobile {
        display: block;
        border: none;
        padding: 10px;
        margin: 0 0 0 auto;
    }
}