@import './global.css';
@import './elements.css';
@import './fonts.css';
@import './normalize.css';


/*
original

h1 = 2rem 
h2 = 1.5rem
h3 = 1.17rem 
h4 = 1rem
h5 = 0.83rem 
h6 = 0.67rem

*/


/* tabletes*/
@media (min-width: 768px) and (max-width: 1114px) { 

    /*COMUM NAS PG*/
    body{
        width: 100%;
    }
    .container-toprow{
        padding-left: 0rem;
        padding-right: 0rem;
        gap: 0.65rem;

    }
    .div_logo{
        margin-left: 0rem;
    }
    .div_menu{
        margin-right: 0rem;
        margin-left: 0.15rem;
    }
    .headerbar_logo{
        font-size: 1.25rem;
        padding: 0.75rem 1.25rem;
    }
    .headerbar_bt{
        font-size: 1.25rem;
        padding: 0.75rem 1.25rem;
    }
    .T1{
        margin-top: 1.875rem;
        margin-bottom: 1.875rem;
        margin-left: 10.75rem;
        margin-right: 10.75rem;
    }

    .low-infos{
        margin-top: 10rem;
        padding-left: 1.75rem;
        padding-right: 5.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        gap: 1.75rem;
        width: 100%;
    }



    /*INDEX*/
    .contain1{
        width: 100%;
        display: flex; 
        flex-wrap: wrap;
        gap: 1.25rem;
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .placa_dupla{
        flex-direction: row;
        width: 100%;
    }
    .placa_dupla_img_div{
        width: 100%;
        justify-content: center;
    }
    .placa_dupla_txt_div{
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        text-align: center;
    
        display: flex;
        flex-direction: column;
        flex: 1 1 100vw;
    }

    .placa_dupla_txt{
        font-size: 1.417rem;
        max-height: 100%;
        box-sizing: border-box;
    }
    .pd_txt_bt{
        margin-top: 1rem;
        margin-right: 12.5rem;
    }





    /*COMICS e DESELHOS LIST*/
    .div-content{
        margin-left: 0rem;
        margin-right: 0rem;
        padding-bottom: 0.6rem;
        flex-direction: row;
        display: flex;
    }

    .poster-icon{
        height: 15.35rem;
        width: 11rem;
    }
    .rows-content{
        width: 100%;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }

    /*COMICS-PG*/
    .div-pg-tit{
        text-align: center;
        margin: 0 auto; /* Centraliza o título */
        width: 80%;
    }
    .poster-big{
        width: 80%;
        height: auto;
    }
    .div-content2{
        margin-bottom: 0.75rem;

        margin-left: 0rem;
        margin-right: 0rem;
        width: 100%;
    }
    .comic-content{
        padding-left: 0rem;
        padding-right: 0rem;
        padding-bottom: 0rem;

        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    
    /*COMICS-PG-CAP*/

    .div-content-pgs{
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 0.75rem;
        flex-direction: column;

        max-width: 100%;
        padding-top: 0.4rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .tofooter-btns{
        margin: 0rem;
    }
    .div-pg-low-btns-cap{
        padding: 0.6rem;
        max-width: 100%;
    }
    .pg-low_bt{
        font-size: 1.25rem;
        border: 0rem;
    
        padding: 0.75rem 2.85rem;
        width: 100%;
    }


    /*DESENHOS-PG*/

    .div-content-drawn{
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 0.75rem;
        flex-direction: column;
        gap: 2rem;
    
        width: 100%;
        padding-top: 0.6rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        padding-bottom: 0.6rem;
    }
    .div-pg-drawn-tit{
        justify-content: center;
        margin: 0 auto;
        padding: 0.6rem;
    }
    .div-drawn-pg-img{
        justify-content: center;
        margin: auto;
        padding: 0rem;
        margin-bottom: 0.6rem;
    }


    .img-h{
        width: 100%;
        height: auto;
    }

    /*REGRAS POLITICA.PRIVA E TERMOS.US*/
    .txt_regras{
        margin: 0.6rem;
    }



    /*BASICO*/
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.5rem;
    }
    h3{
        font-size: 1.17rem;
    }
    h4{
        font-size: 1rem;
    }
    a{
        text-decoration: none;
    }

    img {
        max-width: 100%;
        height: auto;
    }


}


/*Celulares mais largos//= ou superiores a 360 com limite de 450*/
@media (max-width: 450px) { 

    /*COMUM NAS PG*/
    body{
        width: 100%;
    }
    .container-toprow{
        padding-left: 0rem;
        padding-right: 0rem;
        gap: 0.65rem;
    }

    
    .div_logo{
        margin-left: 0rem;
    }
    .div_menu{
        margin-right: 0rem;
        margin-left: 0rem;
    }


    .headerbar_logo, .headerbar_bt {
        padding: 0.45rem 1rem; /* Ajusta o padding dos botões */
        font-size: 1rem;
    }
    /*
    .headerbar_logo{
        font-size: 1.25rem;
        padding: 0.75rem 1.25rem;
    }
    .headerbar_bt{
        font-size: 1.25rem;
        padding: 0.75rem 1.25rem;
    }
*/


    .T1{
        margin-top: 1.875rem;
        margin-bottom: 0.875rem;
        margin-left: 1.75rem;
        margin-right: 1.75rem;
    }
    .low-infos{
        padding-left: 1.75rem;
        padding-right: 1.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        gap: 0.75rem;
        max-width: 100%;
    }
    .low-infos-txt{
        font-size: 0.97rem;
    }
    .link_regras{
        font-size: 0.97rem;
    }



    /*INDEX*/
    .contain1{
        width: 100%;
        display: flex; 
        flex-wrap: wrap;
        gap: 1.25rem;
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .placa_dupla{
        flex-direction: column;
        width: 100%;
    }
    .placa_dupla_img_div{
        max-width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .placa_dupla_txt{
        font-size: 1rem;
        max-height: 100%;
        box-sizing: border-box;
    }
    .pd_txt_bt{
        margin-top: 1rem;
        margin-right: 19.5rem;
    }



    /*COMICS E DESENHOS LIST*/
    .div-content{
        width: 100%;
        margin-left: 0rem;
        margin-right: 0rem;

        padding-left: 0.75rem;
        padding-right: 0.75rem;

        padding-bottom: 0.6rem;
        display: flex;
    }
    header{
        margin-bottom: 0.75rem;
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .div-pg-tit{
        justify-content: center;
    }

    .rows-content{
        width: 100%;
        margin-left: 0rem;
        margin-right: 0rem;
        flex-direction: row;
        display: flex;
        gap: 1.5rem;
        max-width: 100%;
        padding-left: 0rem;
        padding-right: 0rem;
    }
    .poster-icon{
        height: 14.35rem;
        width: 10rem;
    }
    .poster-icon-h{
        height: 7rem;
        width: 11.35rem;
    }


    /*COMICS-PG*/
    .div-pg-tit{
        text-align: center;
        margin: 0 auto; /* Centraliza o título */
        width: 80%;
    }
    .poster-big{
        width: 80%;
        height: auto;
    }
    .div-content2{
        margin-bottom: 0.75rem;

        margin-left: 0rem;
        margin-right: 0rem;
        width: 100%;
    }
    .comic-content{
        padding-left: 0rem;
        padding-right: 0rem;
        padding-bottom: 0rem;

        flex-direction: column;
        align-items: center;
        text-align: center;
    }



    /*COMICS-PG-CAP*/

    .div-content-pgs{
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 0.75rem;
        flex-direction: column;

        max-width: 100%;
        padding-top: 0.4rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .tofooter-btns{
        margin: 0rem;
    }
    .div-pg-low-btns-cap{
        padding: 0.6rem;
        max-width: 100%;
    }
    .pg-low_bt{
        font-size: 1.25rem;
        border: 0rem;
    
        padding: 0.75rem 0.75rem;
        width: 100%;
    }


    /*DESENHO-PG*/
    .div-content-drawn{
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 0.75rem;
        flex-direction: column;
        gap: 2rem;
    
        width: 100%;
        padding-top: 0.6rem;
        padding-left: 0rem;
        padding-right: 0rem;
        padding-bottom: 0.6rem;
    }
    .div-pg-drawn-tit{
        justify-content: center;
        margin-left: 0.6rem;
        padding: 0.6rem;
        max-width: 65%;
    }
    .div-drawn-pg-img{
        justify-content: center;
        margin-left: 0.6rem;
        margin-right: 0.6rem;
        padding: 0rem;
        margin-bottom: 0.6rem;
    }

    .img-h{
        width: 100%;
        height: auto;
    }

    /*REGRAS POLITICA.PRIVA E TERMOS.US*/
    .txt_regras{
        margin: 0.6rem;
    }




    /*BASICO*/
    h1{
        font-size: 2rem;
        white-space:normal;
    }
    h2{
        font-size: 1.5rem;
    }
    h3{
        font-size: 1.17rem;
    }
    h4{
        font-size: 1rem;
        
    }
    a{
        text-decoration: none;
    }

    img {
        max-width: 100%;
        height: auto; 
    }


}

/*Celulares mais estreitos//inferiores a 360*/
@media (max-width: 360px) { 

    /*COMUM NAS PG*/
    body{
        width: 100%;
    }
    .container-toprow{
        padding-left: 0rem;
        padding-right: 0rem;
        gap: 0.65rem;
    }

    
    .div_logo{
        margin-left: 0rem;
    }
    .div_menu{
        margin-right: 0rem;
        margin-left: 0rem;
    }


    .headerbar_logo, .headerbar_bt {
        padding: 0.45rem 0.75rem; /* Ajusta o padding dos botões */
        font-size: 1rem;
    }
    /*
    .headerbar_logo{
        font-size: 1.25rem;
        padding: 0.75rem 1.25rem;
    }
    .headerbar_bt{
        font-size: 1.25rem;
        padding: 0.75rem 1.25rem;
    }
*/


    .T1{
        margin-top: 1.875rem;
        margin-bottom: 0.875rem;
        margin-left: 1.75rem;
        margin-right: 1.75rem;
    }
    .low-infos{
        padding-left: 1.75rem;
        padding-right: 1.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        gap: 0.75rem;
        width: 100%;
    }




    /*INDEX*/
    .contain1{
        width: 100%;
        display: flex; 
        flex-wrap: wrap;
        gap: 1.25rem;
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .placa_dupla{
        flex-direction: column;
        width: 100%;
    }
    .placa_dupla_img_div{
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .placa_dupla_txt{
        font-size: 1.17rem;
        max-height: 100%;
        box-sizing: border-box;
    }
    .pd_txt_bt{
        margin-top: 1rem;
        margin-right: 17.4rem;
    }



    /*COMICS e DESENHOS LIST*/
    .div-content{
        width: 100%;
        margin-left: 0rem;
        margin-right: 0rem;

        padding-left: 0.75rem;
        padding-right: 0.75rem;

        padding-bottom: 0.6rem;
        display: flex;
    }
    header{
        margin-bottom: 0.75rem;
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .div-pg-tit{
        justify-content: center;
    }

    .rows-content{
        width: 100%;
        margin-left: 0rem;
        margin-right: 0rem;
        flex-direction: row;
        display: flex;
        gap: 1.5rem;
        max-width: 100%;
    }
    .poster-icon{
        height: 13.35rem;
        width: 9rem;
    }
    .poster-icon-h{
        height: 7rem;
        width: 11.35rem;
    }
    .link-txt-color{
        white-space: normal;
        font-size: clamp(0.97rem, 1rem, 1rem);
    }




    /*COMICS-PG*/
    .div-pg-tit{
        text-align: center;
        margin: 0 auto; /* Centraliza o título */
        width: 80%;
    }
    .poster-big{
        width: 80%;
        height: auto;
    }
    .div-content2{
        margin-bottom: 0.75rem;

        margin-left: 0rem;
        margin-right: 0rem;
        width: 100%;
    }
    .comic-content{
        padding-left: 0rem;
        padding-right: 0rem;
        padding-bottom: 0rem;

        flex-direction: column;
        align-items: center;
        text-align: center;
    }



    /*COMICS-PG-CAP*/

    .div-content-pgs{
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 0.75rem;
        flex-direction: column;

        max-width: 100%;
        padding-top: 0.4rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .tofooter-btns{
        margin: 0rem;
    }
    .div-pg-low-btns-cap{
        padding: 0.6rem;
        max-width: 100%;
    }
    .pg-low_bt{
        font-size: 1.10rem;
        border: 0rem;
    
        padding: 0.75rem 0.75rem;
        width: 100%;
    }


    /*DESENHO-PG*/
    .div-content-drawn{
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 0.75rem;
        flex-direction: column;
        gap: 2rem;
    
        width: 100%;
        padding-top: 0.6rem;
        padding-left: 0rem;
        padding-right: 0rem;
        padding-bottom: 0.6rem;
    }
    .div-pg-drawn-tit{
        justify-content: center;
        margin-left: 0.6rem;
        padding: 0.6rem;
        max-width: 65%;
    }
    .div-drawn-pg-img{
        justify-content: center;
        margin-left: 0.6rem;
        margin-right: 0.6rem;
        padding: 0rem;
        margin-bottom: 0.6rem;
    }
    .img-h{
        width: 100%;
        height: auto;
    }

    /*REGRAS POLITICA.PRIVA E TERMOS.US*/
    .txt_regras{
        margin: 0.6rem;
    }





    /*BASICO*/
    h1{
        font-size: 1.9rem;
        white-space:normal;
    }
    h2{
        font-size: 1.4rem;
    }
    h3{
        font-size: 1.17rem;
    }
    h4{
        font-size: 1.17rem;
    }
    a{
        text-decoration: none;
    }

    img {
        max-width: 100%;
        height: auto; 
    }

}