/* Monitores Medios*/
@media (max-width: 1444px) and (min-width: 1025px){
    .titulo{
        margin: 4em 0 0 3em;
    }
}


/* Monitores Pequenos*/
@media (max-width: 1024px) and (min-width: 830px){
    .titulo{
        width: 32em;
        height: 28em;
        margin: 4em 0 0 4em;
        padding: 2.5em 0 0 2em;
    }

    .web-geral{
        font-size: 0.8em;

        width: 14em;
        background-color: #1b1b1b;
        text-align: center;
    }

    .titulo h1{
        font-size: 2.5em;
        font-weight: bolder;
        max-width: 9em;
    }

    .titulo p{
        font-size: 1.5em;
        padding-top: 0.7em;
        padding-left: 0.7em;
        max-width: 20em;
    }

}


/* tablets grandes*/
@media (max-width: 830px) and (min-width: 660px){
    .titulo{
        width: 28em;
        height: 28em;
        margin: 1.5em auto auto 1.5em;
        padding: 2em 0 0 2em;
    }

    .web-geral{
        font-size: 0.8em;
        
        width: 14em;
    }

    .titulo h1{
        font-size: 2.5em;
        font-weight: bolder;
        max-width: 9em;
    }

    .titulo p{
        font-size: 1.4em;
        padding-top: 0.9em;
        padding-left: 0.1em;
        max-width: 17em;
    }

    .conteudo{
        max-width: 600px;
        margin: auto;
    }

    .codigo{
        position: relative;
        right: 100px;
        font-size: 1em;
    }

    .codigo-problematico{
        position: relative;
        right: 200px;
        font-size: 1em;
    }

    .compartilhar{
        width: 40em;
        gap: 3em;
    }
    
    .compartilhar img{
        width: 45px;
    }

    #compartilhar-top {
        width: 38em;
    }
    #compartilhar-top{
        margin: 1.5em 0 1.5em 0;
    }

    #informatica{
        margin: auto;
        max-width: 37.5em;
    }

    #link-ramos{
        position: relative;
        left: 30px;
    }
}


/* tablets medios*/
@media (max-width: 660px) and (min-width: 480px){
    header nav li{
        display: none;
    }

    header nav img{
       margin-left: 5em;
    }


    .titulo{
        width: 23em;
        height: 23em;
        margin: 1.5em auto auto auto;
        padding: 2em 0 0 1em;
    }

    .web-geral{
        font-size: 0.8em;
        
        width: 14em;
    }

    .titulo h1{
        font-size: 2.1em;
        font-weight: bolder;
        max-width: 9em;
    }

    .titulo p{
        position: relative;
        font-size: 1.2em;
        max-width: 18em;
        padding-left: 0;
    }


    .conteudo{
        max-width: 400px;
        margin: auto;
    }

    .codigo{
        position: relative;
        right: 160px;
        font-size: 0.9em;
    }

    .codigo-problematico{
        position: relative;
        right: 150px;
        font-size: 0.7em;
    }

    #codigo-problematico-1{
        position: relative;
        right: 150px;
        font-size: 0.8em;
    }
    #codigo-problematico-2{
        position: relative;
        right: 150px;
        font-size: 0.8em;
    }

    .compartilhar{
        width: 10em;
        gap: 10px;
    }
    
    .compartilhar img{
        width: 31px;
    }

    #compartilhar-top {
        width: 25em;
        margin: auto;
    }

    .compartilhar h5{
        font-size: 1.2em;
        padding: 0.1em 0.5em;
    }

    #compartilhar-top{
        margin: 1.5em 0 1.5em 0;
    }

    #compartilhar-buttom{
        padding-top: 2em;
    }

    #informatica{
        margin: auto;
        max-width: 30em;
    }

    #link-ramos{
        position: relative;
        left: 55px;
    }
}


/* Celulares pequenos*/
@media (max-width: 480px) and (min-width: 320px){
    #pesquisar input{
    width: 200px;
    height: 35px;
    font-size: 0.8em;
    }

    header nav li{
        display: none;
    }

    header nav img{
       margin-left: 5em;
    }


    .titulo{
        width: 20em;
        height: 20em;
        margin: 1.5em auto auto auto;
        padding: 1.5em 0 0 1em;
    }

    .web-geral{
        font-size: 0.8em;
        
        width: 14em;
    }

    .titulo h1{
        font-size: 1.7em;
        font-weight: bolder;
        max-width: 10em;
    }

    .titulo p{

        font-size: 1em;
        max-width: 18em;
        padding-left: 0;
    }

    .conteudo{
        max-width: 300px;
        margin: auto;
    }

    .codigo{
        position: relative;
        right: 182px;
        font-size: 0.9em;
        background-color: var(--cor-fundo-code);
    }

    .codigo-problematico{
        position: relative;
        right: 147px;
        font-size: 7.7px;
        background-color: var(--cor-fundo-code);
    }
    #codigo-problematico-1{
        position: relative;
        right: 139px;
        font-size: 8.8px;
    }
    #codigo-problematico-2{
        position: relative;
        right: 130px;
        font-size: 8.5px;
    }
    #codigo-problematico-3{
        position: relative;
        right: 162px;
        font-size: 10px;
    }
    #codigo-problematico-4{
        position: relative;
        right: 158px;
        font-size: 9.8px;
    }

    .compartilhar{
        width: 10em;
        gap: 10px;
    }
    
    .compartilhar img{
        width: 1.2em;
    }

    #compartilhar-top {
        width: 19em;

    }
    #compartilhar-top h5{
        font-size: 0.9em;
    }


    #compartilhar-buttom{
        padding-top: 2em;
    }
    #compartilhar-buttom h5{
        font-size: 1em;
    }

    #informatica{
        margin: auto;
        max-width: 26em;
    }

    #link-ramos{
        position: relative;
        left: 55px;
    }
}

@media (max-width: 320px){
    #pesquisar input{
    width: 200px;
    height: 35px;
    font-size: 0.8em;
    }

    header nav li{
        display: none;
    }

    header nav img{
       margin-left: 5em;
    }


    .titulo{
        width: 20em;
        height: 20em;
        margin: 1.5em auto auto auto;
        padding: 1.5em 0 0 1em;
    }

    .web-geral{
        font-size: 0.8em;
        
        width: 14em;
    }

    .titulo h1{
        font-size: 1.7em;
        font-weight: bolder;
        max-width: 10em;
    }

    .titulo p{

        font-size: 1em;
        max-width: 18em;
        padding-left: 0;
    }

    .conteudo{
        max-width: 300px;
        margin: auto;
    }

    .codigo{
        position: relative;
        right: 182px;
        font-size: 0.9em;
        background-color: var(--cor-fundo-code);
    }

    .codigo-problematico{
        position: relative;
        right: 135px;
        font-size: 7.4px;
        background-color: var(--cor-fundo-code);
    }
    #codigo-problematico-1{
        position: relative;
        right: 139px;
        font-size: 8.8px;
    }
    #codigo-problematico-2{
        position: relative;
        right: 130px;
        font-size: 8.5px;
    }
    #codigo-problematico-3{
        position: relative;
        right: 150px;
        font-size: 9.7px;
    }
    #codigo-problematico-4{
        position: relative;
        right: 140px;
        font-size: 9.3px;
    }

    .compartilhar{
        width: 10em;
        gap: 10px;
    }
    
    .compartilhar img{
        width: 1.2em;
    }

    #compartilhar-top {
        width: 19em;

    }
    #compartilhar-top h5{
        font-size: 0.9em;
    }


    #compartilhar-buttom{
        padding-top: 2em;
    }
    #compartilhar-buttom h5{
        font-size: 1em;
    }

    #informatica{
        margin: auto;
        max-width: 26em;
    }

    #link-ramos{
        position: relative;
        left: 55px;
    }
}