/* ESTILO GERAL */http://127.0.0.1:3000/index.html
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
   background-color: hsl(241, 68%, 3%); /* Gradiente para o tema escuro */
  min-height: 100vh;  /* Use min-height para garantir que o gradiente cubra toda a altura */
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, background 0.3s;
  overflow-x: hidden;
 
}
.titulo {

  font-size: 25px;
  
 
  margin-top: 5px;
}
.titulo2 {
  .titulo {

  font-size: 25px;
  
  color: #eee;
 
  margin-top: 5px;
}
}

h1,h2,h3,h4,h5,h6, {
  color: #eee;
}


.topo-do-site {

}

.topo-do-site h5 {
  font-size: 16px;
}


.topo-do-site h1 span {

  font-size: 35px;
}

/* Cabeçalho */
header {
  width: 100%;
  padding: 20px 4%;
  display: flex;
  justify-content: center;
  
}

header a {
  color: #fff;
}

@keyframes flutuar {
  0% {
    top: 0;
  }

  100% {
    top: 10px;
  }
}

/* ESPECIALIDADES */












section.especialidades {
  text-align: center;
  max-width: 50%;
  padding: 40px 4%;
}

.especialidades-box i {
  font-size: 50px;
  color: #a57bff;
  margin-bottom: 15px;
}


  
.jslogo,
.htmllogo,
.csslogo,
.reactlogo,
.nodelogo,
.javalogo,
.gitlogo,
.pylogo,
.gmlogo {
  cursor: pointer;
   display: flex;
  border: 2px solid #eee; /* Cor da borda azul */
  background-color: hsla(241, 85%, 2%, 0.68); /* Adicione cor se necessário */
  height: auto; /* Mantém a proporção */
  margin: 10px;
  margin-bottom: 25%;
  
}

.jslogo img,
.htmllogo img,
.csslogo img,
.reactlogo img,
.nodelogo img,
.javalogo img,
.gitlogo img,
.pylogo img,
.gmlogo img {
  width: 50px;
}
.jslogo {

display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;

  padding: 20px; /* Adicione espaçamento interno */
}
.jslogo img {
   position: ;
}
.htmllogo {
display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
 
  padding: 20px; /* Adicione espaçamento interno */
}
.csslogo {
display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
 
  padding: 20px; /* Adicione espaçamento interno */
}

.nodelogo {
  display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
  
  padding: 20px; /* Adicione espaçamento interno */
}

.reactlogo {
  display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
 
  padding: 20px; /* Adicione espaçamento interno */
}

.pylogo {
display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
  
  padding: 20px; /* Adicione espaçamento interno */
}

.htmllogo {
  display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
  
  padding: 20px; /* Adicione espaçamento interno */
}

.gitlogo {
  display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
 
  padding: 20px; /* Adicione espaçamento interno */
}

.javalogo {
 display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
  
  padding: 20px; /* Adicione espaçamento interno */
}
.gmlogo {
display: flex; /* Garante que os conteúdos internos sejam flexíveis */
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha o conteúdo à esquerda */
  width: 250px; /* Ajuste conforme necessário */
  text-align: left; /* Alinha o texto à esquerda */
  border-radius: 30px;
  
  padding: 20px; /* Adicione espaçamento interno */
}

body {
   flex-direction: column;
  align-items: center;
  text-align: center;
}









.projeto1,.projeto2,.projeto3 {

   display: flex;
  border: 2px solid #eee; /* Cor da borda azul */
  background-color: hsla(241, 85%, 2%, 0.68); /* Adicione cor se necessário */
  height: auto; /* Mantém a proporção */
  margin: 10px;
  margin-bottom: 25%;
 
}



 .gitbut{
  color: #eee;
  padding: 8px 15px;
  border: 2px solid #eee; /* Cor da borda azul */
  font-size: 60%;
  font-weight: 600;
   cursor: pointer;
   display: flex;
  border: 2px solid #eee; /* Cor da borda azul */
  background-color: hsla(241, 85%, 2%, 0.68); /* Adicione cor se necessário */
  
  border-radius: 30px;
  cursor: pointer;
  filter: brightness(1);
  margin-top: 10px;
  align-self: flex-start;  /* Alinha botões à esquerda */
}




body .vejabutt {
   color: #eee;
   border: 0;
   background: none;
   
}


.vejabutt:hover{
  transform: scale(1.05);
  filter: brightness(1.2);
}
 .gitbut:hover {

  transform: scale(1.05);
  filter: brightness(1.2);
}