@import url('style.css');
/*Mobile*/

   
@media (orientation: portrait) or (max-width: 940px) {
    
    div#container{
        grid-template-columns: 0fr 10fr 0fr;
        grid-template-rows: 10vh 8vh 74vh 8vh;
    }

    div#menuToggle{
        display: none;
        position: relative;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }
    
    #menuToggle span
    {
        display: block;
        width: var(--size-rem-lg);
        height: var(--size-rem-xxs);
        margin-top: var(--size-rem-xxs);
        margin-bottom: var(--size-rem-xxs);
        margin-left: var(--size-rem-xs);
        position: relative;
        background-color: var(--cor-tomDeBranco);
        border-radius: var(--size-rem-md);
        z-index: 1;
        transform-origin: 0% 50%;
        transition: transform 0.5s cubic-bezier(0,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0,0.2,0.05,1.0),
                    opacity 0.55s ease;
    }

        #menuToggle.deactive span:first-child{
            transform-origin: 0% 0%;
            transform: rotate(0) translate(0, 0);
        }

        #menuToggle.deactive span:nth-child(2){
            visibility: visible;
        }

        #menuToggle.deactive span:last-child{
            transform-origin: 0% 0%;
            transform: rotate(0) translate(0, 0);
        }

        #menuToggle span:nth-child(1) {
            transform: rotate(45deg) translate(4px, -5px);
        }
        
        #menuToggle span:nth-child(2) {
            visibility: hidden;
        }
        
        #menuToggle span:nth-child(3) {
            transform: rotate(-45deg) translate(0px, 8px);
        }
    
    .deactive{
        display: none;
    }
    
    aside#barraLateralBotoes {
        /* display: none; */
        /* visibility: hidden; */
        position: fixed; /* Fixa a barra lateral na tela */
        top: 50%; /* Centraliza verticalmente */
        left: 50%; /* Centraliza horizontalmente */
        transform: translate(-50%, -50%); /* Garante que ela fique exatamente no centro */
        width: 80%; /* Ajusta a largura para caber melhor no mobile */
        max-height: 80%;
        margin-right: 0px;
        z-index: 10; 
        border: var(--size-rem-xxs) solid #331c3c;
        overflow-y: auto;
        border-radius: var(--size-rem-xxs);
    }

    main{
        grid-column: 1/-1;
        grid-row: 3/4;
    }

    #equacao{
        margin: var(--size-rem-sm);
    }
        

    div#bannerTop{
        grid-column: 1/-1;
        grid-row: 2/3;
    }

    div#bannerBaixo{
        grid-column: 1/-1;
        grid-row: 4/5;
    }

    .bannerAd{
        padding: 4px;
    }

    footer > div#textos{
        display: flex;
        flex-direction: column;
    }

    div#textos > div{
        padding: var(--size-rem-md);
    }

    #bannerDir{
        display: none;
    }

    #container > section{
        display: inline-flex;
        grid-column: 1/-1;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    section > div > div{
        display: inline-flex;
    }
    

    div#menuToggle{
        display: block;
    }
}