@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body{
    font-family: 'Raleway', sans-serif;
    background-color: #F5F5F5;  
}

.conteudo-footer{
    text-align: center;  
    color: white;
    font-size: 13px;
    padding: 40px 0;  
    background-color: grey;  
}

.copyright{
    color: white;
    font-size: 13px;
    margin: 0 2px;
}

/* Estilizando a barra de navegação principal*/
nav{  
    display: flex;  
    align-items: center;
    justify-content: space-between;
    padding-top: 34.5px;    
}

nav h1{
    margin-left: 153px;    
}

nav h1:before{      
    height: 16px;
    width: 16px;
    left: 1px;
    top: 4px;
    margin-right: 15px;   
    vertical-align: middle;
    content: url(../img/estrela.png);
}

nav ul {
    display: flex;
    margin-right: 152px;      
}

nav ul li{     
    margin: 0 0 0 32px;
}

nav li:last-child{
    font-weight: bold;
}

nav a{
    text-decoration: none;
    color: #464646;
}
nav a:hover{
    text-decoration: underline;
}

/* estilizando o header*/

header {
    display: flex; 
    color: #464646;       
    margin: 66.5px 152px 0px 152px;
    align-items: center; 
    justify-content: space-between;   
}

.principal{
    width: 100%;
}

.imagem-apresentacao{    
    border-radius: 50%;       
    width: 368px;    
    height: 368px;
}

header h2{
    margin: 24px 0px;
    font-size: 52px;
    font-weight: bolder;
}

header p{
    margin: 24px 0px;    
    font-size: 22px;
    font-weight: 400;
}

header li{
    margin: 10px 0px;
    padding: 0 60px 0 0;
    display: inline-flex;   
}

header li:after{
    margin-left: 5px ;
    content: url("../img/seta.png")
}

header a{
    color: #464646;
    text-decoration: none;   
}

header a:hover{
    text-decoration: underline;
}

/* estilizando o main (sobre mim)*/

.sobre-mim{    
    color:#464646;    
    background-color: #EAF2FD;        
}

.sobre-mim h1{
    padding: 64px 0 0 152px;
    font-size: 32px;
    font-weight: bold;    
}

.sobre-mim p{   
    padding: 16px 0 0 152px;
    width: 62.7%; 
}

.assinatura{
    height: 52px;
    width: 140px;
    left: 0px;
    top: 203px;
    padding: 0px 0 64px 152px;   
}

/* estilizando skills e hobbies */

.skills-hobbies{
    color: #464646;
    background: #F5F5F5;
    margin: 0 152px 0 152px;    
}

.skills h1{
    font-size: 32px;
    margin: 32px 0 0 32px;
    text-align: center;    
}

.skills ul{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 32px;
  }

.skills li{
    display: inline-flex;
    width: 15.5%;
    height: 174px;
    background: #FFFFFF;    
}

.skills img{
    position: absolute;
    margin: 94px 120px 43px 16px;
    height: 37px;
    width: 40px;
  }

  .skills h3{
    position: absolute;
    margin: 139px 16px 16px 16px;
  }

  .hobbies h1{
    font-size: 32px;
    margin: 32px 0 0 32px;
    text-align: center;
    margin-top: 88px;
}
  
.hobbies ul{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 32px;
  }

.hobbies li{
    display: inline-flex;
    width: 15.5%;
    height: 174px;
    background: #FFFFFF;    
}

.hobbies img{
    position: absolute;
    margin: 94px 120px 43px 16px;
    height: 37px;
    width: 40px;
  }

  .hobbies h3{
    position: absolute;
    margin: 139px 16px 16px 16px;
  }

/* estilizando formação acadêmica */

.formacao-academica{
    color:#464646;    
    background-color: #EAF2FD;    
    display: flex;
    margin-top: 88px;    
}

.formacao-academica div{
    margin: 0 152px 0 152px;
}

.formacao-academica h1{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding-top: 82px;    
}

.formacao-academica ul{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;      
    margin-top: 32px;    
}

.formacao-academica li{    
    width: 30%;
}

.formacao-academica img{
    background: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    width: 100%;
    height: 100%;
    padding: 78px 88px;
    display: flex;
    flex-direction: column;
}

.formacao-academica h3{
    font-size: 22px;
    font-weight: bold;
    margin-top: 8px;
}

.formacao-academica p{
    font-size: 16px;
    margin-bottom: 82px;
}

/* estilizando experiência profissional */

.link-repo{        
    border: 2px solid #2A7AE4;   
    width: 105px;
    height: 51px;
    left: 16px;
    top: 16px;
    margin-top: 8px;        
}

.link-repo a{
    color: #2A7AE4;
    text-decoration: none;    
}

.link-repo:hover{
    text-decoration: underline;    
}

.link-acesso{
    background-color: #2A7AE4;    
    border: none;
    width: 105px;
    height: 51px;
    left: 16px;
    top: 16px; 
    margin-top: 8px; 
}

.link-acesso a{
    color: #F5F5F5;
    text-decoration: none;
}

.link-acesso:hover{
    background-color: #2A7AE4;        
    text-decoration: underline;
}

.exp-profissional{
    color: #464646;
    background: #F5F5F5;
    margin: 0 152px 32px 152px;  
}

.exp-profissional h2{
    font-size: 22px;
    font-weight: bold;
}

.exp-profissional h3{
    margin-top: 8px;
    font-size: 16px;
}

.exp-profissional h1{
    margin-top: 32px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

.exp-profissional li{
    display: flex;
    flex-direction: row;
    align-items: middle;
}

.dsvendas{
    display: flex;
    align-items: center;   
    margin: 32px 0; 
}

.dsvendas img{
    width: 66.20%;    
}

.dsvendas div{
    margin: 0 0 0 26px;
}

.codificador-texto{
    display: flex;
    align-items: center;   
    margin-top: 53.5px; 
}

.info-acessos-codificador{
    width: 33.8%;
    margin-left: 16px;
}

.codificador-texto img{
    width:  66.20%;    
}

.codificador-texto div{
    margin: 0 0 0 26px;
}

.jogo-forca{
    display: flex;
    align-items: center;   
    margin-top: 53.5px; 
}

.info-acessos-forca{
    width: 33.8%;
    margin-left: 16px;
}

.jogo-forca img{
    width:  66.20%;    
}

.jogo-forca div{
    margin: 0 0 0 26px;
}

.consulta-sus{
    display: flex;
    align-items: center;   
    margin-top: 53.5px; 
}

.info-acessos-consulta-sus{
    width: 33.8%;
    margin-left: 16px;
}

.consulta-sus img{
    width:  66.20%;    
}

.consulta-sus div{
    margin: 0 0 0 26px;
}

/* estilizando formulario de contato*/

.form-contato{
    color: #464646;
    background: #EAF2FD;      
}

.form-contato h1{
    font-size: 32px;
    font-weight: bold;    
}

.form-contato h2{
    font-size: 16px;
    margin-top: 8px;
}

.contato{   
    display: flex;
    justify-content: center;
    padding-top: 128px;      
}

.posicionamento-img img{
    display: block;    
    width: 464px;   
}

.posicionamento-form{
    display: flex;
    width: 35vw;
    flex-direction: column;  
    margin-left: 16px;    
    margin-bottom: 64px;
}

.input-contato{
    border: transparent;
    height: 40px;
    margin: 10px 0 10px 0;
    width: 100%;
}

.input-mensagem{
    border: transparent;
    margin: 10px 0 10px 0;
    height: 97px;
    width: 100%;
}

.botao-envio{
    background-color: #2A7AE4;
    padding: 16px;
    color: white;
    margin-top: 32px;
}