/*CSS Reset / Normalize*/
/*Já deixaremos o básico de reset de estilos. Caso queira adicionar mais informações
coloque nas sessões indicadas*/

:root{
    /*Insira a variavel das outras cores inspecionando o modelo do figma*/
    /*Se esforce para trabalhar com variáveis, é uma dica profissional valiosa*/
   --cor-de-fundo: #F5F5F5;
   --cor-de-link: #000;

   --cor-de-texto-geral: #464646;
   --cor-de-fundo-destaque: #EAF2FD;
   --cor-branco: #FFFFFF;

   --cor-azul-100: #2A7AE4;
   --cor-azul-80-hover: #5595E9;

   --cor-botao-bg-hover: #D4E4FA;
}

body {
    box-sizing: border-box;
    background-color: var(--cor-de-fundo) ;
    font-family: 'Raleway';
    margin: 0;
    padding: 0;
    line-height: 1;

    color: var(--cor-de-texto-geral);
}
ol, ul,li {
    list-style: none;
}
a{
    text-decoration: none;
    color: var(--cor-de-link);
}

/*Neste desafio, gostariamos que praticassem a metodologia BEM, caso seintam a vontade 
de utiliza-la. 

Mas o que é o BEM?

BEM (Block, Element, Modifier) ​​é uma abordagem baseada em componentes para o desenvolvimento
web. A ideia por trás disso é dividir a interface do usuário em blocos independentes.
Isso torna o desenvolvimento de interface fácil e rápido, mesmo com uma interface
de usuário complexa, e permite a reutilização de código existente sem copiar e colar.

Link da documentação oficial!
https://en.bem.info/methodology/quick-start/*/

/* --------------------------------->  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;
}

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

    margin: 0 150px;
}

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

    border-radius: 50%;

    flex-grow: 1;
}

.title__container {
    width: 800px;
}

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

    margin: 0;
}

.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: 62px 150px;
}

.about__container {
    width: 800px;
}

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

.about__paragraph {
    font-weight: 400;
    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;    
}

.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;
}

/* --------------------------------->  Experiência 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);
}

.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;
}

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

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

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.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;
}