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

    header .container {
        display: flex;
        flex-direction: column;
    }

    .botao {

        margin-top: 5px;
        width: 300x;


    }

    .popup{

        width: 100vw;
        padding: 0rem;
        max-width: 100%; /* Limita a largura máxima do popup */
        max-height: 100%;
    }
    .popup-content {

        width: 100vw;
        padding: 1rem;

    }

    #menu--desktop{

        display: none;
    }

    footer{

        margin-bottom: 5rem;
    }

    .container{

        margin: .5rem;
    }


}

@media screen and (min-width:701px) {

    .popup{

        width: 100vw;
        padding: 0rem;
        max-width: 95%; /* Limita a largura máxima do popup */
        max-height: 95%;
       
    }
    .popup-content {

        width: 95vw;
        padding: 1rem;

    }

    .nav--mobile{

        display: none;
    }
    


}

@media screen and (min-width:1000px) {

    .popup{

        width: 90vw;
        padding: 1rem;
    }
    .popup-content {

        width: 90vw;
        padding: 1rem;

    }

    .popup {
        display: none;
        position: fixed;
        z-index: 301;
        left: 50%; /* Define o ponto de partida horizontalmente no centro da tela */
        top: 50%; /* Define o ponto de partida verticalmente no centro da tela */
        transform: translate(-50%, -50%); /* Move o popup de volta para cima e para a esquerda em 50% do seu próprio tamanho */
        width: 70vw;
        height: auto; /* Alterado para 'auto' para acomodar o conteúdo */
        max-width: 90%; /* Limita a largura máxima do popup */
        max-height: 90%; /* Limita a altura máxima do popup */
        overflow: auto; /* Adicionado para permitir rolagem se o conteúdo for maior do que a tela */
        background-color: rgba(0, 0, 0, 0.5);
        padding: 0;
    }
    
    .popup-content {
        background-color: #fefefe;
        margin: 0;
        border: 1px solid #888;
        width: 70vw;
        display: flex;
        flex-direction: column; 
        gap: 1rem;
        padding: 3rem;
        padding-top: 1rem;

    }

    
    


}


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

    .descricao {

        width: 50%;
    }

    .anime-principal {

        height: 35vh;
    }

    .anime-principal .container p {

        display: none;
    }

    .botoes {

        margin-top: .8rem;
        gap: 1rem;
    }

    .botao {

        width: 13rem;
    }

    

}