/*CSS Reset / Normalize*/
/*Já deixaremos o básico de reset de estilos. Caso queira adicionar mais informações
coloque nas sessões indicadas*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;  
    font-family: "Raleway", sans-serif;
}
: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;
}

body {
    box-sizing: border-box;
    background-color: var(--cor-de-fundo) ;
    font-family: 'Raleway';
    margin: 0;
    padding: 0;
    line-height: 1;
}
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*/
.Header{
    display: flex;
    justify-content: space-around;
    align-items: center; 
    padding-top: 20px;
    padding: 32px 100px 32px 100px;
}
header img{
    width: 24px;
    height: 24px;
}
header{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
.menu__list {
    display: flex;
    align-items: center;
    gap:16px;
   
}



/*Sessão Title*/
section.title{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 32px;
    gap: 20px;
}
.title__div{
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    align-items: center;
}
.title__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.title__bio{
    font-size: 52px ;
}
.title__subsection{
    font-size:22px ;
}
.title__network {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}
.title__network__item a:after{
    content: url(./assets/arrow.png);
    gap:15px;
}


/*Sessão About*/
section.about{
     background-color: #EAF2FD;
}
.about__container{
    display: flex;
    flex-direction: column;  
    gap: 16px;

}
.about__title{
    font-size: 32px;
}
.about__paragraph{
    font-size: 16px;
}
.about__container img{
    width: 140px;
    height: 52px;
}


/*Skill*/
section.skill{

}
.skills__title__main{
    font-size: 32px;
}
.skills{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    align-items: center;

}
.skills__title{
   margin-bottom: 32px;
}
.skills__line{
    display: flex;
    gap: 10px;
}
.skills__box{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    width: 176px;
    height: 176px;
}
.skills__img{
    padding-bottom: 10px;
}
.skills__name{
    font-size: 14px;
}



/*Sessão Hobbies*/

section.hobbies{
    
}

.hobbies{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    align-items: center;

}
.hobbies__title{
    font-size: 32px;
   margin-bottom: 32px;
}
.hobbies__line{
    display: flex;
    gap: 10px;
}
.hobbies__box{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    width: 176px;
    height: 176px;
}
.hobbies__img{
    padding-bottom: 10px;
}
.hobbies__name{
    font-size: 14px;
}



/* Experiência Acadêmica*/

section.academic{

}
.academic{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #EAF2FD;

}
.academic__title{
    font-size: 32px;
}
.academic__courses{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
.academic__title{
   margin-bottom: 32px;
}
.academic__courses{
    display: flex;
    gap: 30px;

}
.academic__courses__box{
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align: center;  
}
.academic__courses__item__img img{
    height: 200px;
    width: 200px;
}
.academic__courses__item__img_oracle img{
    height: 100px;
    padding-top: 60px;
    padding-bottom: 40px;
  }
 

/* experiência*/

section.experience{

}
.experience__section__title{
    text-align: center;
    font-size: 32px;
    margin-bottom: 32px;
}
.experiencie__box{    
    display: flex;
    justify-content: center;
    Width:1136px;
    Height:406px;
    gap: 16px;
    padding-bottom: 40px;
}

.experience__info{
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.experiencia__botao--repo{
    width: 116px;
    height: 51px;
    border:solid 1px #2A7AE4;
    color: #2A7AE4;
   
}
.experiencia__botao--repo:hover{
    transition: 0.4s;
    width: 121px;
    height: 56px;
    cursor: pointer;
}
.experiencia__botao--demo{
    width: 105px;
    height: 51px;
    border:solid 1px #2A7AE4;
    background-color: #2A7AE4;
    color: white;   
}
.experiencia__botao--demo:hover{
    transition: 0.4s;
    width: 110px;
    height: 61px;
    cursor: pointer;
}
/*Contato*/

section.formcontato{
    display: flex;
    justify-content: center;
}
.formcontato__contacto{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
.formcontato__title{
  font-size: 32px;
  margin-bottom: 8px;
}

.formcontato__text{
    display: flex;
    flex-direction: column;
}
.formcontato__form{
    display: flex;  
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
}
.formcontato__input{
    width:656px ;
    height:56px;
    
}
.formcontato__botao{
    width:165px;
    height:51px;
    border:solid 1px #2A7AE4;
    background-color: #2A7AE4;
    color: white;   
    cursor: pointer;
}
.formcontato__botao:hover{
    transition: 0.4s;
    width: 170px;
    height: 56px;
    cursor: pointer;
}

/*footeer*/

section.footer{
    
}
.footer__rodape{
    display: flex;
    text-align: center;
    flex-direction: column;
    gap: 10px;
    
}

/* Chegou a hora de se desafiar com a responsividade, 
utilize como referência os breakpoints @media abaixo*/

@media (max-width: 1024px) {
   .Header{
    display: flex;
    justify-content: center;
    gap: 40px;
   }
   .about__container{
  
   }
   .skills__line{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
   }
   .hobbies__line{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
   }
    section.experience{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;

   }
   .experiencie__box{    
    display: flex;
    justify-content: center;
    Width:708px;
    Height:320px;
    gap: 16px;
    padding-bottom: 40px;
}
   .experience__section__title{
    text-align: center;
    padding: auto;
}
    .experiencie__box{
        display: flex;
        flex-direction: column;
        margin: 50px 0px 50px 0px;
        gap: 16px;
    
    }
    section{
        padding: 32px 50px 32px 50px;
    }
    
}
@media (max-width: 850px) {
    .menu__list{display: none;}
    .Header{font-size: 16px;}
    .title__bio{
        font-size: 22px;
    }
    .title__subsection{
        font-size: 16px;
    }
    .title__profile{
        width: 146px;
        height: 146px;
    }   
    .about__title{
        font-size: 16px;
    }
    .about__paragraph{
        font-size: 14px;
    }
    .skills__title__main{
        font-size: 22px;
    }
    .hobbies__title{
        font-size: 22px
    }
    .academic__title{
        font-size: 22px
    }
    .experience__section__title{
        font-size: 22px
    }
    section.experiencie{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .formcontato__title{
        font-size: 22px;
    }
    .formcontato__text{
        font-size: 16px;
    }
    

}
/*Tablet*/
@media (min-width: 768px) {
.Header{
    display:flex;
    font-size: 18px;
    justify-content: space-around;
}
/* Menu */

/*title*/

/*Skills*/

/*Hobbies*/

/*Experiências acadêmicas*/
section.academic{
    justify-content: center;
}
/*Expeirência profissional*/

}

/*Mobile*/
@media (min-width: 425px) {

/*Menu*/

/*Titulo*/

/*Sessão sobre*/

/*Skills*/

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

/*Experiência Profissional*/

 /*Contato*/

/*Footer*/

}

section{
    padding: 32px 100px ;
}
/* section{
    padding: 3rem 9% 5rem;
} */


/* padding: 100px 152px 32px 100px; */


/* 
Pretendo criar um outro portifolio, porém agora não conseguirei, por conta do curto periodo de tempo, que estou no momento. Principalmente por conta da faculdade.
*/