@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(10px);
  }
}

    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }

      .cursor::after {
      content: " em breve";
      animation: blink 1s steps(1) infinite;
    }
*{
    margin:0;
    font-family: inter;
    z-index: 1;
    scroll-behavior: smooth;
  
  
    
}



header{
 
    display: flex;
    justify-content: space-around;
    padding: 25px;
    align-items: center;
    color: blanchedalmond;
    width:100%;
    margin: auto;
    
   
  

}
b{
    color: #1349ff;
    font-size: 35px;
}

nav a{
    text-decoration: none;
    color: white;
    padding: 30px;
}

body{
   background-color: #161b2e;
   scroll-behavior: smooth; 
 

}

main{
    margin: auto;
    width:80%;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 3s ease forwards; /* 3s = tempo da aparição */
    animation-delay: 1s;
    

    

}
#apresentacao{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    z-index: 1;
    
  
    
    
 
}

#texto_apresentacao{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
 
    
   
}

#foto_apresentacao{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
 
}

#foto{
    background-color: #1349ff;
     width:300px;
     margin-bottom:80px;
  
    border-radius: 40px;
}

#fotos{
    width: 300px;
    border-radius: 10%;
    margin-bottom:80px;
    background-color: #1349ff;
   
 
 
}

#texto{
    color: white;
    text-align: left;
    padding: 20px;
    margin-top: 180px;
    margin-bottom: 190px;
    font-size: 20px;
}

    img{
        z-index: 1;
    }

#btn{
    background-color: #1349ff;
    margin-top: 30px;
    padding: 15px;
    border: solid 2px #1349ff;
    border-radius: 10px;
    width: 150px;
    color: white;
}

#descriçao{
    font-size: 25px;
}


/* fim da apresentação do projeto */


#Habilidades{
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color:#1349ff;
    margin-top: 200px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 3s ease forwards; /* 3s = tempo da aparição */
    animation-delay: 1s;
}

#Habilidades h2{
    padding: 30px;
    font-size: 30px;
}

#fotosHabilidades{
    display:flex;
    width: 100%;
}
.icones{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: auto;
    width: 100px;

    margin: auto;
}
.icones img{
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}


#sobre_conteiner{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: 200px;
    margin-bottom: 100px;
     opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 3s ease forwards; /* 3s = tempo da aparição */
    animation-delay: 1s;
}

  


#sobre{
    width: 50%;
    display: flex;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
   
}

#sobre img{
    width:300px
}


#foto_sobre{
    width: 50%;
    color: white;
   


}

#foto_sobre h2{
    color: #1349ff;
    padding-bottom: 20px;
   
}

#Conteiner_projetos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    text-align: center;

}

#titulos_projetos{
    margin-top: 100px;
    margin-bottom:100px;
    color: white;
}

#titulos_projetos h2{
    color: #1349ff;
    font-size: 30px;
    padding: 5px;
}

#projetos{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.projetoss{
   display: flex;
    flex-direction: column;
    width: 400px;
    height:500px;
    background-color: #141b28;
    border-radius:20px;
    border: solid 1px #1349ff;
    opacity: 0.7; 
    align-items: center;
    text-align: center;
    justify-content: center;

}

.projetoss{
   width: 400px;
    height:500px;
    background-color: #141b28;
    border-radius:20px;
    border: solid 1px #1349ff;
    opacity: 0.7; ;

}
.projetoss{
   width: 280px;
    height:280px;
    background-color: #141b28;
    border-radius:20px;
    border: solid 1px #1349ff;
    opacity: 0.7; ;

}
.projetoss:hover{
    opacity: 1;
    transition: 0.5s;

}



.projetoss a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    background-color: #1349ff;
    padding: 5px;
    width: 75%;
    border-radius: 8px;
    margin:20px
    
}




.projetoss h2{
    padding: 15px;
    text-align: center;
    color: #1349ff;

  
}

.projetoss img{
    width: 100%;
}

 #particles-js {
      position:fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
#contatos-conteiner{
    display: flex;
    margin-top: 200px;
    margin-bottom: 200px;
   
    
  
}

#formulario{
    display: flex;
    flex-direction: column;
    width: 60%;
   
    align-items: center;
    padding: 30px;
 
}

#contatos{
    width: 40%;
    

}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #242938;
    width: 70%;
    margin-top: auto;
    align-items: center;
    border-radius: 40px;
    height: 450px;
   
}

input{
    width:60%;
    margin-top:5px;
    background-color:#242938;
    border: none;
    border-bottom: #1349ff solid 2px;
    margin-top: 30px;
    font-size: 20px;
    color: white;
    padding: 5px;
    
}

input:focus {
  outline: none;
  
}


#lugar{
    margin-top: 70px;
}

textarea{
    width: 60%;
    height: 100px;
    margin-top: 30px;
    background-color:#141b28;
    border-color: #141b28;
    resize: none;
   
 
    font-size: 15px;
    color: white;
    padding: 5px;
}

#btn2{
    background-color: #1349ff;
    margin-top: 20px;
    padding: 10px;
    border: solid 2px #1349ff;
    border-radius: 10px;
    width: 150px;
    color: white;
}

a:hover{
    color: #1349ff;
    transition: 0.5s;
   

}

#textos_contatos{
  
    width: 100%;
    margin-top:160px;
    text-align: center;
    color: white;
}

#textos_contatos h3{
    color: #1349ff;
    font-size: 30px;
    padding: 5px;
}

#redes_sociais{
   
    width: 100%;
    text-align: center;
    padding-top: 40px;
}


#redes_sociais h3{
   
    color: #1349ff;
    font-size: 25px
}



#redes_sociaiss_links a{
    margin: 20px;
    text-decoration: none;
    color: white;
    font-size: 20px;

    
}

#redes_sociaiss_links img{
    width:60px;
 

    
}

footer{
    background-color: #161b2e;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 15px;
    margin: 0;
}

#breve{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    
    width: 100%;
}
#breve h3{
    color: white;
    background-color: #1349ff;
    width: 100%;
    
}

#Menu_resposivo{
    background-color: #141b28;
    display: flex;
    flex-direction: column;
    text-align: center;
    opacity: 0.9;
    display: none;
    transition: 0.5s;


}



#Menu_resposivo a{
    color: white;
    text-decoration: none;
   

    text-align: center;
  
}
#Menu_resposivo a:hover{
    background-color: #1349ff;
    transition: 0.5s;
 
    width: 100%;
    text-align: center;
    opacity:1;
}

#Hamburguer{
    
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    display: none;
}

#Hamburguer img{
  width: 35px;
}

#fotos2{
   display: none;
 
 
}

#descriçao{
    display: none;
}

 #fechar{
    display: none;
    
    border: none;
    cursor: pointer;
    width: 40px;
   
 }





@media (max-width: 768px) {
 #nav_desktop{
    display: none;
 }

 #Hamburguer{
    display: flex;
 }
 #Hamburguer :hover{
    background-color: #1349ff;
    color: #141b28;
    
 }

 #fechar{
    display: none;
 
    border: none;
    cursor: pointer;
    width: 40px;
    justify-content: center;
    background-color: #141b28;

   
   
}
#fechar img{
  width: 40px;

}



 #Menu_resposivo{
    display:none;
    opacity: 0.7; 
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(-20px);
    transition: all 0.5s ease;
    
 }

  #Menu_resposivo a{
    display:flex;
    flex-direction: column;
    align-items: center;
 }

 #Menu_resposivo a:hover{
    opacity: 1;
    
 }

 #apresentacao{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:row-reverse;
    text-align: center;
    margin-top: 100px;}
 #texto{
 
   
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin: auto;
    font-size: 20px;
    text-align: center;
 }

 #foto_apresentacao{
  
    margin-top: 30px;
    display: none;
    text-align: center;
    
 }

 #fotos2{
    display: flex;
    width: 300px;
    background-color: #1349ff;
    border-radius: 50%;
 }

 main{
    width: 100%;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
}

header{
 
    display: flex;
    justify-content: space-around;
    padding: 15px;
    align-items: center;
    color: blanchedalmond;
    width:100%;
   
  
    margin: 0;
   
  

}

#descriçao2{
    display: flex;
    font-size: 25px;
    margin-top: 10px;
    background-color: #1349ff;
    padding: 5px;
    border-radius: 10px;
    width: 100%;

}

#Habilidades{
    display: flex;
    flex: content;
   
    flex-direction: column;
}

#fotosHabilidades{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#titulo1{
    display: flex;
    font-size: 25px;
    margin-top: 10px;

  
    border-radius: 10px;
    width: 100%;
    text-align: center;
    justify-items: center;
    align-items: center;

}
#sobre{
    display: none;
}

#foto_sobre{
    background-color: #242938;
    width: 100%;
    text-align: center;
    padding: 20px;
    border-radius: 20px;
}

#Conteiner_projetos{
    width: 100%;
    margin: auto;
    
}

#projetos{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


#contatos-conteiner{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
}

#textos_contatos{
    width: 100%;
  

    border-radius: 10px
};

#redes_sociaiss_links{
    background-color: black;
}

#contatos{

    width: 100%;
  
    
}


#formulario{
    width: 100%;
   
    border-radius: 10px;
    padding: 20px;





}



}