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


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

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

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

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

     /* botões */
     header #menu {
        /* estilo da lista */
        list-style: none;

        /* alinhamento dos botões */
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    /* links */
    header #menu a {
        /* estilo do texto */
        color: var(--disabled-gray);
        text-decoration: none;
        font-size: 10px;
        font-weight: 500;

        /* espaçamento do texto */
        padding: 5px;
    }

    header #menu a:hover {
        border-bottom: 1px var(--disabled-gray) solid;
    }

    /* hover do botão elevado */
    header #menu .elevated a:hover {
        -webkit-box-shadow: inset 0px 0px 0px 1px var(--disabled-gray);
        -moz-box-shadow: inset 0px 0px 0px 1px var(--disabled-gray);
        box-shadow: inset 0px 0px 0px 1px var(--disabled-gray);
        background-color: var(--default-blue);
        color: var(--disabled-gray);
    }

    /* alinhamento do botão diferente */
    header #menu .elevated a {
        background-color: var(--disabled-gray);
        color: var(--default-blue);
        border-radius: 36.36px;
        padding: 8px 25px;
    }

    header #menu .elevated a {
        border: none;
    }

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