/* Responsividade padrão tablet */

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

    #menu {
        display: block;
        position: absolute;
        width: 99%;
        top: 70px;
        right: -7em;
        background: #F5F5F5;
        transition: .6s;
        height: 0;
        z-index: 1000;
        visibility: hidden;
        overflow-y: hidden;
    }

    #nav-menu.active #menu {
        height: 70vh;
        visibility: visible;
    }

    #menu a {
        padding: 1rem 0;
        margin: 0 1rem;
        border-bottom: 2px solid rgba(0, 0, 0, .05);
    }

    #btn-mobile {
        display: flex;
    }

    #btn-mobile {
        display: flex;
        padding: .5rem 1rem;
        font-size: 1rem;
        border: none;
        background: none;
        cursor: pointer;
        gap: 1rem;
    }

    #hamburguer {
        border-top: 2px solid;
        width: 20px;
    }
    
    #hamburguer::after, #hamburguer::before {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        margin-top: 5px;
        transition: .3s;
        position: relative;
    }

    #nav-menu.active #hamburguer {
        border-top-color: transparent;
    }

    #nav-menu.active #hamburguer::before {
        transform: rotate(135deg);
    }

    #nav-menu.active #hamburguer::after {
        transform: rotate(-135deg);
        top: -7px;
    }
}


@media screen and (max-width: 830px) {
    body, main, .cabecalho, .sobre-mim,
    .container-skills-hobbies, .formacao,
    .experiencia, .formulario, footer {
        width: auto;
    }
    /* Header */

    header p {
        margin: 0.3% auto auto 4%;
        font-weight: bold;
    }

    header p:before {
        display: inline-block;
        content: url("../Imagens/Logo.png");
        margin-right: .3em;
    }

    .nome-header2 {
        display: none;
    }

    /* Seção Apresentação */

    .apresentacao {
        height: 270px;
    }

    .apresentacao img {
        width: 176px;
        height: 176px;
        display: block;
        float: right;
        margin: 2.5em 3em 0 0;
    }

    .apresentacao h1 {
        display: block;
        font-size: 25px;
        font-weight: bold;
        margin: 2.4em 0 0.5em 1em;
    }

    .apresentacao p {
        font-size: 16px;
        display: block;
        flex-wrap: wrap;
        margin: 0 0 1em 1.6em;
        width: 60%;
    }

    .links-sociais {
        width: 50%;
        margin: 0 0 0 1.6em;
    }
    .links-sociais li {
        display: inline-block;
        margin-right: 25px;
    }

    /* Seção Sobre Mim */

    .sobre-mim {
        height: 256px;
        padding-top: 35px;
    }

    .sobre-mim h2 {
        display: block;
        margin: 0 0 0 1.6em;
        font-size: 22px;
    }
    .sobre-mim p {
        display: block;
        width: 90%;
        margin: 2em 0 0 2.5em;
        font-size: 14px;
    }

    /* Seção Skills e Hobbies */

    .container-skills-hobbies {
        padding-bottom: 4%;
    }

    .skills {
        display: block;
    }

    .skills ul {
        display: flex;
        flex-wrap: wrap;
        width: 60%;
        margin: auto;
    }

    .skills h2 {
        text-align: center;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 38px;
        padding-top: 2rem;

    }
    .skills p {
        position: absolute;
        margin: 85% auto 1% 5%;
        font-weight: bold;
    }
    .skills li {
        width: 194px;
        height: 196px;
        background-color: #ffffff;
        display: inline-block;
        margin: 5% auto;
        border-radius: 2%;
        box-shadow: 4px 4px 4px rgba(204, 204, 204, 0.76);
        position: relative;

    }
    .skills img {
        position: absolute;
        margin: 62% auto 1% 5%;
    }

    .hobbies {
        display: block;
    }
    .hobbies ul {
        display: flex;
        flex-wrap: wrap;
        width: 60%;
        margin: auto;
    }
    .hobbies h2 {
        text-align: center;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 38px;
        padding-top: 3rem;
    }
    .hobbies p {
        position: absolute;
        margin: 85% auto 1% 5%;
        font-weight: bold;
    }
    .hobbies li {
        width: 194px;
        height: 196px;
        background-color: #ffffff;
        display: inline-block;
        margin: 5% auto;
        border-radius: 2%;
        box-shadow: 2px 2px 2px rgba(204, 204, 204, 0.76);
        position: relative;
    }
    .hobbies img {
        position: absolute;
        margin: 62% auto 1% 5%;
    }

    /* Seção Formação Acadêmica */


    .formacao {
        background-color: #D4E4FA;
    }
    .formacao h2 {
        text-align: center;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: 38px;
        padding-top: 2rem;
    }
    .formacoes {
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        margin: auto;
        justify-content: space-between;
    }
    .bloco-formacoes {
        background-color: #ffffff;
        display: inline-block;
        margin: 8% auto 5% auto;
        border-radius: 2%;
        box-shadow: 4px 4px 4px rgba(204, 204, 204, 0.76);
        position: relative;
        width: 300px;
        height: 168px;
    }

    .logo-uniavan{
        width: 80%;
        margin: 10% 10% 0 9%;
    }

    .logo-alura {
        width: 60%;
        margin: 7% 10% 0 20%;;
    }

    .formacoes div h3 {
        margin: 0.02em 0 0 0;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
        text-align: left;

    }
    .formacoes div p {
        margin: 0.05em 0 2em 0;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 19px;
        text-align: left;
        padding-bottom: 2%;
    }

    /* Seção Contato */

    .formulario {
        display: flex;
        margin: 10% auto;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .formulario img {
        display: none;
    }
}