/*TODO ---- Mobile ---- */
@media screen and (min-width: 375px) {
    
    /* --------------------------------->  Menu */
    section.menu {
        margin: 0;
        justify-content: space-around;
    }
    
    .menu__list {
        display: none;
    }
    
    .menu__list__item__contato {
        display: block;
    
        font-weight: 400;
    }
    
    /* --------------------------------->  Titulo */
    .title__div {
        flex-direction: column;
        align-items: center;
    
        margin: -16px 16px 16px 16px;
    }
    
    .title__profile {
        width: 98px;
        height: 98px;
    
        margin-bottom: 16px;
    }
    
    .title__container {
        width: 360px;
    }
    
    .title__bio {
        font-size: 22px;
        line-height: 26px;
    
        /* color: blue; */
    }
    
    .title__subsection {
        font-size: 14px;
        line-height: 16px;
    }
    
    .title__network {
        width: 318px;
    }
    
    /* --------------------------------->  About */
    section.about {
        padding: 16px;
    }
    
    .about__container {
        width: auto;
    }
    
    .about__title {
        font-size: 22px;
        line-height: 26px;
    
        margin: 0;
    }
    
    .about__paragraph {
        font-size: 14px;
        line-height: 16px;
    }
    
    /* --------------------------------->  Skills */
    section.skills {
        padding: 16px;
    }
    
    .skills__title {
        margin: 16px;

        font-size: 22px;
        line-height: 26px;
    }
    
    .skills__line {
        justify-content: space-around;
    }

    .skills__box {
        width: 110px;
        height: 118px;
    }
    
    /* --------------------------------->  Hobbies */
    section.hobbies {
        padding: 16px;
    }
    
    .hobbies__title {
        margin: 16px;

        font-size: 22px;
        line-height: 26px;
    }
    
    .hobbies__line {
        justify-content: space-around;
    }

    .hobbies__box {
        width: 110px;
        height: 118px;
    }
     
    /* --------------------------------->  Formação Acadêmica */
    section.academic {
        padding: 16px;
    }
    
    .academic__title {
        margin: 16px;

        font-size: 22px;
        line-height: 26px;
    }
    
    .academic__courses {
        flex-wrap: wrap;
    }

    .academic__courses__box {
        margin: 16px;
    }

    .academic__courses__item__img {
        width: 296px;
        height: 130px;
    }

    .academic__courses__list li {
        margin: 0;
    }

    .academic__courses__item__title {

        font-size: 16px;
        line-height: 19px;
    }

    .academic__courses__item__subtitle {
        font-size: 14px;
        line-height: 16px;
    }
    
    /* --------------------------------->  Experiência Profissional */
    section.experience {
        padding: 16px;
        margin: 0;
    }
    
    .experience__section__title {
        margin: 16px;

        font-size: 22px;
        line-height: 26px;
    }
    
    .experiencie__box {
        flex-direction: column;
    }
    
    .experiencie__box:nth-child(odd) {
        flex-direction: column;
    }

    .experience__img {
        width: 296px;
        height: 144px;
    }

    .experience__info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .experience__title {
        font-size: 16px;
        line-height: 19px;

        margin: 16px 0 0 0;
    }
    
    .experience__text {
        font-size: 14px;
        line-height: 16px;
    }

    .experiencia__botao--repo, .experiencia__botao--demo {
        width: 96px;
        height: 40px;

        padding: 12px 16px;
    }
    
    /* --------------------------------->  Contato*/
    .formcontato__contato {
        padding: 16px;
    }
    
    .formcontato--esquerda {
        display: none;
    }
    
    .formcontato__text {
        margin: 0;
    }

    .formcontato__form {
        height: 350px;
    }

    .formcontato__botao {
        width: 151px;
        height: 40px;

        padding: 12px 16px;
    }
    
    /* --------------------------------->  Footer */
    
}


/*TODO ---- Tablet ---- */
@media screen and (min-width: 768px) {

    /* --------------------------------->  Menu */
    section.menu {
        justify-content: space-between;

        margin: 0 32px;
    }
    
    .menu__list {
        display: none;
    }
    
    .menu__list__item__contato {
        display: block;
    
        font-weight: 700;
        font-size: 16px;
        line-height: 19px;
    }
    
    /* --------------------------------->  title */
    .title__div {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;

        margin: 16px 32px;
    }
    
    .title__profile {
        width: 146px;
        height: auto;
    }

    .title__container {
        width: 524px;
        height: 130px;
    }
    
    /* .title__bio {
        color: red;
    } */
    
    .title__subsection {
        font-size: 16px;
        line-height: 19px;
    }

    .title__network {
        width: 450px;
    }
    
    /* --------------------------------->  About */
    section.about {
        padding: 32px;
    }
    
    .about__container {
        width: 600px;
    }
    
    .about__title {
        font-size: 22px;
        line-height: 26px;
    }
    
    .about__paragraph {
        font-size: 14px;
        line-height: 16px;
    }
    
    /* --------------------------------->  Skills */
    .skills__title {
        font-size: 22px;
        line-height: 26px;
    }

    .skills__box {
        width: 170px;
        height: 118px;
    }
    
    /* --------------------------------->  Hobbies */
    .hobbies__title {
        font-size: 22px;
        line-height: 26px;
    }

    .hobbies__box {
        width: 170px;
        height: 118px;
    }
    
    /* --------------------------------->  Acadêmicas */
    section.experience {
        align-items: center;
    }
    
    .academic__title {
        font-size: 22px;
        line-height: 26px;
    }

    .academic__courses {
        flex-wrap: nowrap;

        margin: 0;
    }

    .academic__courses__item__img {
        width: 224px;
        height: 130px;
    }
    
    /* --------------------------------->  Experiência profissional */
    .experience__section__title {
        font-size: 22px;
        line-height: 26px;
    }
    
    .experiencie__box {
        flex-direction: column;
    
        width: 704px;
    }
    
    .experiencie__box:nth-child(odd) {
        flex-direction: column;
        align-items: center;
    }
    
    .experience__img {
        width: 704px;
        height: 320px;
    }
    
    .experience__title {
        font-size: 16px;
        line-height: 19px;
    }
    
    .experience__text {
        font-size: 14px;
        line-height: 16px;
    }
    
    /* --------------------------------->   BOTOES */

    .experiencie__box {
        align-items: center;
    }

    .experiencie__box:nth-child(odd) {
        align-items: center;
    }

    .experiencia__botao--repo, .experiencia__botao--demo {
        width: 96px;
        height: 40px;
    
        padding: 12px 16px;
    }
    
    /* --------------------------------->  Contato */
    .formcontato__contato {
        padding: 50px 80px;
    
        justify-content: center;
    }
    
    .formcontato--esquerda {
        display: none;
    }
    
    .formcontato__form {
        justify-content: space-evenly;
    }
    
    .formcontato__botao {
        padding: 12px 16px;
    
        width: 151px;
        height: 40px;
    }
    
}

/*TODO ---- Desktop --- */
@media screen and (min-width: 1024px) {
    
    /* --------------------------------->  Sessão Menu */
    section.menu{
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin: 0 150px;
    }

    section header {
        display: flex;
        align-items: center;
        font-weight: 700;
    }

    section header img {
        margin-right: 16px;
    }

    .menu__list {
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 750px;

        padding: 0;

        font-weight: 500;
    }

    .menu__list__item:last-child {
        /* Deixando em negrito */
        font-weight: 700;
    }

    .menu__list__item__contato {
        display: none;
    }

    /* --------------------------------->  Sessão Title */
    section.title{
        margin: 32px 0;
        height: 368px;
    }

    .title__div {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: stretch;

        margin: 0 150px;
    }

    .title__profile {
        width: 368px;
        height: 368px;
    }

    .title__container {
        width: 800px;
    }

    .title__bio {
        font-weight: 700;
        font-size: 52px;
        line-height: 61px;

        margin: 32px 0;

        /* color: violet; */
    }

    .title__subsection {
        font-weight: 400;
        font-size: 22px;
        line-height: 26px;
    }

    .title__network {
        display: flex;
        justify-content: space-between;

        width: 450px;

        padding: 0;

        font-weight: 500;
    }

    /* --------------------------------->  Sessão About */
    section.about{
        background-color: var(--cor-de-fundo-destaque);
        padding: 64px 150px;
        margin: 100px 0px 32px 0px;
    }

    .about__container {
        width: 800px;
    }

    .about__title {
        font-weight: 700;
        font-size: 32px;
        line-height: 38px;

        margin-bottom: 16px;
    }

    .about__paragraph {
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
    }

    /* --------------------------------->  Sessão Skills --- */
    section.skills {
        padding: 0 150px;
        
    }

    .skills__title {
        text-align: center;

        font-weight: 700;
        font-size: 32px;
        line-height: 38px;
    }

    .skills__line {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .skills__box {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        padding: 16px;
        margin: 20px 0;

        width: 100px;
        height: 110px;

        background-color: var(--cor-branco);
        border-radius: 20px;

        font-weight: 700;
    }
    .skills__box ul {
        margin: 0;
        padding: 0;
    }

    .skills__img {
        margin-bottom: 8px;
    }

    /* --------------------------------->  Sessão Hobbies */
    section.hobbies{
        padding: 0 150px;
        margin: 32px 0px;
    }

    .hobbies__title {
        text-align: center;

        font-weight: 700;
        font-size: 32px;
        line-height: 38px;
    }

    .hobbies__line {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .hobbies__box {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        padding: 16px;
        margin: 20px 0;

        width: 100px;
        height: 110px;

        background-color: var(--cor-branco);
        border-radius: 20px;

        font-weight: 700;
    }

    .hobbies__box ul {
        margin: 0;
        padding: 0;
    }

    .hobbies__img {
        margin-bottom: 8px;
    }

    /* --------------------------------->  Acadêmica */
    section.academic{
        padding: 64px 0;
        background-color: var(--cor-de-fundo-destaque);
    }

    .academic__title {
        text-align: center;

        font-weight: 700;
        font-size: 32px;
        line-height: 38px;
    }

    .academic__courses {
        display: flex;
        justify-content: center;

        margin: 0 150px;
    }

    .academic__courses__box {
        width: 26.5rem;
        margin: 0 1rem;
    }

    .academic__courses__list {
        margin: 0;
        padding: 0;

        text-align: center;
    }

    .academic__courses__list li {
        padding: 0;
        margin: 32px 0;
    }

    .academic__courses__item__img {
        background-color: var(--cor-branco);
        width: 368px;
        height: 130px;
    }

    .academic__courses__item__title {
        font-weight: 700;
        font-size: 22px;
        line-height: 26px;
    }

    .academic__courses__item__subtitle {
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;
    }

    /* --------------------------------->  experiência */
    section.experience{
        display: flex;
        flex-direction: column;

        margin: 16px 150px 30px 150px;
    }

    .experience__section__title {
        text-align: center;

        font-weight: 700;
        font-size: 32px;
        line-height: 38px;
    }

    .experiencie__box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        margin: 25px 0;

        width: 1136px;
        height: 406px;
    }

    .experiencie__box:nth-child(odd) {
        flex-direction: row-reverse;
    }

    .experience__img {
        width: 752px;
        height: 406px;
        /* border: 1px solid red; */
    }

    .experience__info {
        align-items: flex-start;
    }

    .experience__title {
        font-weight: 700;
        font-size: 22px;
        line-height: 26px;
    }

    .experience__text {
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;
    }

    .experiencia__botao--repo {
        width: 105px;
        height: 51px;

        margin-right: 16px;

        background-color: var(--cor-de-fundo);
        color: var(--cor-azul-100);

        border: 1px solid var(--cor-azul-100);
    }

    .experiencia__botao--repo:hover {
        cursor: pointer;

        background-color: var(--cor-botao-bg-hover);
    }

    .experiencia__botao--demo {
        width: 105px;
        height: 51px;

        padding: 16px;

        background-color: var(--cor-azul-100);
        color: var(--cor-branco);

        border: none;
    }

    .experiencia__botao--demo:hover {
        cursor: pointer;

        background-color: var(--cor-azul-80-hover);
    }

    /* --------------------------------->  Contato */
    section.formcontato{
        background-color: var(--cor-de-fundo-destaque);
    }

    .formcontato__contato {
        display: flex;
        justify-content: space-around;
        padding: 50px 150px;
    }

    .formcontato--esquerda {
        display: block;
    }

    .formcontato__text {
        margin-left: 16px;
    }

    .formcontato__title {
        font-weight: 700;
        font-size: 32px;
        line-height: 38px;

        margin-top: 0;
    }

    .formcontato__subtext {
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;

        margin-top: 0;
    }

    .formcontato__form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;

        height: 458px;
    }

    .formcontato__input {
        height: 25px;
    }

    .formcontato__textarea {
        height: 133px;
        resize: none;
    }

    .formcontato__botao {
        width: 165px;
        height: 51px;

        padding: 16px;

        background-color: var(--cor-azul-100);
        color: var(--cor-branco);

        border: none;
    }

    .formcontato__botao:hover {
        cursor: pointer;

        background-color: var(--cor-azul-80-hover);
    }

    /* --------------------------------->  footeer */
    section.footer{
        background-color: var(--cor-branco);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px;
    }
}