@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap");
body {
  padding: 0;
  background-color: #ffffff;
  font-family: "Raleway", sans-serif;
  flex-grow: 1;
  margin-top: 30px;
  color: #393b44;
}
* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
.nav {
  background-color: #f9f6f7;
  color: #393b44;
  list-style: none;
  text-align: right;
  padding: 20px 0 20px 0;
  margin: 0 auto;
  width: 100%;
  height: 30px;
  position: fixed;
  flex-grow: 1; /*colcoar tiupo flex*/
  top: 0;
  z-index: 30;
  float: left;
}

.logo {
  font-family: "Rajdhani", sans-serif;
  float: left;
  color: #393b44;
  padding-left: 25px;
  font-size: 1.75em;
  font-weight: bold;
  padding: 0px 55px;
}

.logo img{
  margin-top: 5px;
  margin-left: 8px;
}


.img-container {
  height: 650px;
  overflow: hidden;
  width: 100%;
  background-image: linear-gradient(to right, #efb1ff, #481380);
  background-size: cover;
}

.inner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
}

.inner-container h3{
  animation: typing 3s;
}


/*Botão*/
.btn {
  color: white;
  padding: 10px 24px;
  font-size: 20px;
  text-decoration: none;
  background:#7f78d2;
  transition: 0.3s all;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  overflow: hidden;
  width: auto;
}
/*Texto Formatado*/
.conteudo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  transition: all 0.4s;
}

.caixa {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  float: center;
  background: transparent;
  height: auto; /*tamanho da caixa*/
  justify-content: center;

}


.cx-contato {
  width: 60%;
  float: left;
  margin-left: 290px;
  margin-right: auto;
  background: transparent;
  height: auto; /*tamanho da caixa*/
}


.caixa-title {
  text-align: center;
  margin-top: 32px;
  
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}



/*Perfil*/

.profile-pic {
  border-radius: 50%;
  width: 300px;
  height: auto;
  margin: auto 5% auto auto;
}



.linha-vertical {
  height: auto; /*Altura da linha*/
  border-right: 15px solid;
  border-right-color: #543864;
  margin-bottom: 15px;
  margin-right: 0;

}

.linha-verticaldois {
  height: auto; /*Altura da linha*/
  border-right: 15px solid;
  border-right-color: #ff6363;
  margin-bottom: 15px;
  margin-right: 0;

}

.linha-verticaltres {
  height: auto; /*Altura da linha*/
  border-right: 15px solid;
  border-right-color: #ffbd69;
  margin-bottom: 15px;
  margin-right: 0;


}

.linha-verticalquatro {
  height: auto; /*Altura da linha*/
  border-right: 15px solid;
  border-right-color: #202040;
  margin-bottom: 15px;
  margin-right: 0;

}
/*Contato*/


.redes1 {
  width: 197px;
  border: 1px solid #a7d7c5;
  background-color: #ffffff;

  margin: 20px 10px;
  float: left;
  margin-top: 60px;
  margin-bottom: auto;
}

.redes1:hover{
  opacity: 0.5;
}


/*------------------------------------------*/
.redes2 {
  width: 197px;
  border: 1px solid #74b49b;
  background-color: #ffffff;

  margin: 20px 10px;
  float: left;
  margin-top: 60px;
  margin-bottom: auto;
}

.redes2:hover{
  opacity: 0.5;
}



/*------------------------------------------*/
.redes3 {
  width: 197px;
  border: 1px solid #5c8d89;
  background-color: #ffffff;

  margin: 20px 10px;
  float: left;
  margin-top: 60px;
  margin-bottom: auto;
}


.redes3:hover{
    opacity: 0.5;
}
/*-------------------------------------------*/
.redes {
  width: 957px;
  text-align: center;
  margin-left: 130px;
  
}


.image{
    margin: 15px 0 0 0;
}

.image2{
  margin: 0 15px 0 0;
  width: 85px;
  height: 85px;
}
/*------Interesses-----------*/
.caixaCurriculo{
  width: 70%;
  background: transparent;
  margin-top: 50px;
  margin-left: 132px;
  margin-right: auto;
  height: auto; 
  display: block;
  position: relative;/*tamanho da caixa*/
  justify-content: center;
  align-items: center;
  text-align: justify;
  float: left;
}
.centralIntere{
  text-align: justify;
  margin-left: 20px;
  margin-right: auto;
}



.caixaInt{
  width: 105px;
  height: 125px;
  
  margin-left: auto;
  margin-right: auto;
  border: 1.5px solid #f76b8a;
  background-color:transparent;
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 25px;
  float: left;
  justify-content: center;
  
  
}




.caixaInt img{
  width: 60px;
  height: 60px;
  display: block;
  margin: auto;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

/*------Exp----*/ 
.caixaForm{
  width: 650px;
  height: 95px;
  margin: 20px 10px;
  background-color: transparent;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}


/*-----------------------------*/
.progress{
  height: 15px;
  background-color: #d9ecf2;
  position: relative;
  width: 70%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.progress .progressIngles{
 position: absolute;
 height: 100%;
 background-color: #46b3e6;
 animation: animacao1 3s ;

}

.progress .progressEspanhol{
  position: absolute;
  height: 100%;
  background-color: #4d80e4;
  animation: animacao2 3s ;

 }

 .progress .progressFrances{
  position: absolute;
  height: 100%;
  background-color: #2e279d;
  animation: animacao3 3s ;

 }
/*Fazer a classe do texto idioma*/ 
.progresstexto{
  background-color: transparent;
  position: relative;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

@keyframes animacao1{
  0% { width: 0%; }
  
  100% { width: 100%}

}

@keyframes animacao2{
  0% { width: 0%; }
  
  100% { width: 80%}
  
}

@keyframes animacao3{
  0% { width: 0%; }
  
  100% { width: 10%}
  
}

@keyframes typing{
  from{
    opacity: 0;
    width: 0;
  }

  to{
    opacity: 100;
    width: 28em;
  }
}