* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;*/
  font-family: poppins, sans-serif;
  border: 0;
  vertical-align: baseline;
}

@media (max-width: 768px) {
  .cabecalho {
    max-width: 768px;
  }

  .container-logo {
    width: 100%;
  }

  .navegacao {
    position: relative;
    top: 0;
    width: 3%;
    z-index: 100; /*garante que a barra de navegação fique acima de outros elementos*/
    padding: 1rem; /*adiciona espaçamento interno*/
  }

  .menu {
    flex-direction: row;
    overflow-x: auto; /*permite rolagem horizontal se os itens excederem a largura da tela*/
    white-space: wrap; /*impede que os itens quebrem para a próxima linha*/
    gap: 1rem;
    padding: 0 1rem;
    font-size: 0.25rem;
  }
}

html {
  scroll-behavior: smooth;
}

:root {
  --secundaria: #b67ed6;
  --fundo: #38424c;
  --escuro: #3a2b37;
  --maisescuro: #0a0a0a;
  --fonte: #a8b9f1;
  --vidro: rgba(184, 125, 17, 0.05);
  --sombra: rgba(207, 0, 207, 0.3);
}

body {
  background: var(--fundo);
  color: var(--fonte);
}

.navegacao {
  position: fixed; /*fixa a barra de navegação no topo da página*/
  top: 0;
  background-color: rgba(0, 0, 0, 0.76);
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.541);
  width: 100%;
  z-index: 100; /*garante que a barra de navegação fique acima de outros elementos*/
  padding: 1.5rem; /*adiciona espaçamento interno*/
  color: var(--fonte); /*define a cor do texto da barra de navegação*/
}

.menu {
  margin: 0;
  padding: 0;
  display: flex; /*usa flexbox para alinhar os itens horizontalmente*/
  justify-content: center; /*centraliza os itens horizontalmente*/
  list-style: none; /*remove os marcadores da lista*/
  gap: 3rem; /*adiciona espaçamento entre os itens do menu*/
  flex-direction: row;
}

.menu-link {
  text-decoration: none; /*remove o sublinhado dos links*/
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0; /*adiciona espaçamento interno vertical aos links*/
  color: var(--fonte); /*define a cor do texto dos links*/
  font-size: 1rem; /*define o tamanho da fonte dos links*/
}

/*after -> antes/ before -> depois*/
.menu-link::after {
  content: ""; /*cria um pseudo-elemento vazio*/
  position: absolute; /*posiciona o pseudo-elemento de forma absoluta em relação ao link*/
  width: 0; /*define a largura do pseudo-elemento como 100% do link*/
  height: 2px; /*define a altura do pseudo-elemento*/
  bottom: 0; /*posiciona o pseudo-elemento na parte inferior do link*/
  left: 0; /*alinha o pseudo-elemento à esquerda do link*/
  background: #000000; /*define a cor de fundo do pseudo-elemento*/
  transition: width 0.5s ease; /*adiciona uma transição suave para a expansão da largura*/
}

.menu-link:hover::after {
  width: 100%; /*ao passar o mouse, a largura do pseudo-elemento se expande para 100% do link*/
}

.cabecalho {
  height: 600px;
  display: flex; /*usa flexbox para alinhar os itens dentro do cabeçalho*/
  justify-content: center; /*centraliza os itens horizontalmente*/
  align-items: center; /*centraliza os itens verticalmente*/
  flex-direction: column; /*alinha os itens em uma coluna --- Se eu quisesse em linha, usaria ROW*/
}

.container-logo {
  width: 100%; /*define a largura do contêiner como 100% do elemento pai*/
  height: 100%;
  padding: 0; /*remove o preenchimento do contêiner*/
  margin: 0; /*remove a margem do contêiner*/
}

span {
  font-family: "Lato", sans-serif;
  user-select: none;
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 0 #8190c4, 0 2px 0 #8190c4, 0 3px 0 #8190c4,
    0 4px 0 #8190c4, 0 5px 0 #8190c4, 6px 0 transparent,
    0 7px transparent 0 8px 0 transparent, 0 10px 10px rgba(0, 0, 0.5);
  animation: bounce 0.6s ease-out infinite alternate;
  animation-delay: 1.4s;
}

h1 span:nth-child(2) {
  animation-delay: 1.5s;
}
h1 span:nth-child(3) {
  animation-delay: 1.6s;
}
h1 span:nth-child(4) {
  animation-delay: 1.7s;
}
h1 span:nth-child(5) {
  animation-delay: 1.8s;
}

@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #8190c4, 0 2px 0 #8190c4, 0 3px 0 #8190c4,
      0 4px 0 #8190c4, 0 5px 0 #8190c4, 0 6px 0 #8190c4, 0 7px 0 #8190c4,
      0 8px 0 #8190c4, 0 9px 0 #8190c4, 0 60px 30px rgba(0, 0, 0, 0.8);
  }
}

.logo {
  width: 100%; /*define a largura da imagem como 100% do contêiner*/
  height: 100%; /*define a altura da imagem como 100% do contêiner*/
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px; /*adiciona espaçamento entre os itens dentro do contêiner*/
  font-size: 9.5rem;
  color: rgb(116, 222, 248);
}

/*.foto-perfil {
  width: 300px;
  height: 300px;
  box-shadow: 0 0 20px rgba(100, 190, 241, 0.63); /*adiciona uma sombra ao redor da imagem*
  border-radius: 50%; /*torna a imagem circular*
  object-fit: cover; /*cobre todo o espaço da imagem sem distorção*
  border: 4px solid var(--vidro); /*adiciona uma borda ao redor da imagem*
  animation: flutuar 5s ease-in-out infinite;
  z-index: 1; /*garante que a borda animada fique acima de outros elementos*
} */

.apresentacao {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.apresentacao-titulo {
  font-size: 3rem; /*define o tamanho da fonte do título*/
  margin: 20px; /*adiciona espaçamento acima do título*/
}

.apresentacao-sub-titulo {
  font-size: 1.2rem; /*define o tamanho da fonte do subtítulo*/
}

.sobre {
  padding: 6rem 2rem; /*adiciona espaçamento interno ao redor da seção "Sobre"*/
}

.sobre-titulo {
  font-size: 3rem; /*define o tamanho da fonte do título da seção "Sobre"*/
  text-align: center; /*centraliza o texto do título*/
}

.sobre-caixa {
  padding: 2rem;
  max-width: 800px; /*define a largura máxima da caixa de texto*/
  margin: 0 auto; /*centraliza a caixa de texto horizontalmente*/
  border-radius: 16px; /*arredonda os cantos da caixa de texto*/
  border: 1px solid var(--vidro); /*adiciona uma borda ao redor da caixa de texto*/
  backdrop-filter: blur(
    10px
  ); /*aplica um efeito de desfoque ao fundo da caixa de texto*/
  background: rgba(255, 255, 255, 0.05);
}

.sobre-paragrafo {
  text-align: center; /*centraliza o texto do parágrafo*/
  font-size: 1.2rem; /*define o tamanho da fonte do parágrafo*/
}

.mini-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 100%;
}

.seta-esquerda {
  rotate: -90deg;
  width: 100px;
  height: 100px;
  filter: drop-shadow(-5px -1px 3px rgb(106, 149, 206));
}

.seta-esquerda:hover {
  transform: translateY(-20px);
  filter: drop-shadow(-5px -1px 3px rgb(106, 149, 206));
  transition: all 0.3s linear;
}

.seta {
  width: 100%;
  height: 100%;
}

.seta-direita {
  rotate: 90deg;
  filter: drop-shadow(5px 1px 3px rgb(106, 149, 206));
  width: 100px;
  height: 100px;
}

.seta-direita:hover {
  transform: translateY(-20px);
  filter: drop-shadow(5px 1px 3px rgb(106, 149, 206));
  transition: all 0.3s linear;
}

.projetos {
  padding: 4rem 2rem; /*adiciona espaçamento interno ao redor da seção "Projetos"*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.projetos-imagem {
  width: 100%;
  height: 70%;
}

.projetos-titulo {
  text-align: center; /*centraliza o texto do título*/
  font-size: 2.5rem; /*define o tamanho da fonte do título*/
  margin-bottom: 5rem;
}

.projetos-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.63); /*adiciona uma sombra ao redor do cartão de projeto ao passar o mouse*/
  transform: translateY(10px) scale(1.2); /*move o cartão para baixo e aumenta ligeiramente o tamanho ao passar o mouse*/
}

.projetos-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(
    5px
  ); /*aplica um efeito de desfoque ao fundo do cartão de projeto*/
  overflow: hidden;
  transition: all 0.3s ease; /*adiciona uma transição suave para o efeito de hover*/
  position: relative; /*define o posicionamento relativo para permitir o uso de pseudo-elementos*/
  width: 350px;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 3rem;
}

.info-projetos {
  margin-bottom: 5px;
  text-align: center;
}

.caixa-texto-projetos {
  padding: 1rem; /*adiciona espaçamento interno ao redor do texto do projeto*/
  z-index: 1;
  height: 10rem;
  text-align: center;
}

.paragrafro-projetos {
  line-height: 1.25rem;
}

.contatos {
  padding: 6rem 2rem; /*adiciona espaçamento interno ao redor da seção "Contato"*/
}

.contatos-titulo {
  text-align: center; /*centraliza o texto do título*/
  font-size: 2.5rem; /*define o tamanho da fonte do título*/
  margin-bottom: 50px; /*adiciona espaçamento abaixo do título*/
}

.formulario-contato {
  max-width: 600px; /*define a largura máxima do formulário de contato*/
  margin: 0 auto; /*centraliza o formulário horizontalmente*/
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(
    5px
  ); /*aplica um efeito de desfoque ao fundo do formulário*/
  padding: 2rem; /*adiciona espaçamento interno ao redor do formulário*/
  border-radius: 16px; /*arredonda os cantos do formulário*/
  border: 1px solid var(--vidro); /*adiciona uma borda ao redor do formulário*/
}

.campo-form {
  width: 100%; /*define a largura do campo de formulário como 100% do contêiner pai*/
  padding: 1rem; /*adiciona espaçamento interno ao redor do campo de formulário*/
  border-radius: 8px; /*arredonda os cantos do campo de formulário*/
  border: 1px solid var(--vidro); /*adiciona uma borda ao redor do campo de formulário*/
  background: rgba(
    255,
    255,
    255,
    0.05
  ); /*define o fundo do campo de formulário com um efeito de vidro*/
  outline: none; /*remove o contorno padrão do campo de formulário*/
  color: white;
}

.campo-form:focus {
  border-color: var(
    --fonte
  ); /*altera a cor da borda do campo de formulário ao receber foco*/
  box-shadow: 0 0 10px var(--escuro); /*adiciona uma sombra ao redor do campo de formulário ao receber foco*/
}

.grupo-form {
  margin-bottom: 1.5rem; /*adiciona espaçamento abaixo do grupo de campos do formulário*/
}

.botao-form {
  padding: 1rem 2rem; /*adiciona espaçamento interno ao redor do botão*/
  background: var(--maisescuro);
  border: none; /*remove a borda padrão do botão*/
  border-radius: 8px; /*arredonda os cantos do botão*/
  cursor: pointer; /*muda o cursor para indicar que o botão é clicável*/
  font-weight: bold; /*define o peso da fonte do botão como negrito*/
  width: 100%; /*define a largura do botão como 100% do contêiner pai*/
  transition: all 0.3s ease; /*adiciona uma transição suave para o efeito de hover*/
  color: var(--fonte);
}

.botao-form:hover {
  transform: translateY(-4px); /*move o botão para cima ao passar o mouse*/
  box-shadow: 0 10px 20px var(--fonte); /*adiciona uma sombra ao redor do botão ao passar o mouse*/
}

@keyframes flutuar {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.rodape {
  background-color: rgba(67, 82, 167, 0.164);
  text-align: center; /*centraliza o texto do rodapé*/
  position: relative; /*define o posicionamento relativo para permitir o uso de pseudo-elementos*/
  height: auto; /*define a altura do rodapé*/
  gap: 20px;
  padding: 20px; /*adiciona espaçamento interno ao redor do rodapé*/
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.rodape-texto {
  font-size: 1.3rem; /*define o tamanho da fonte do texto do rodapé*/
  padding: 1rem; /*adiciona espaçamento interno ao redor do texto do rodapé*/
}

.redes-sociais {
  z-index: 1000; /*garante que a lista de redes sociais fique acima de outros elementos*/
}

.lista-rede-social {
  gap: 1rem;
  padding: 0;
}

.item-rede-social {
  list-style: none; /*remove os marcadores da lista*/
  display: inline-block; /*exibe os itens da lista como blocos em linha*/
  margin: 0 25px; /*adiciona espaçamento horizontal entre os itens da lista*/
}

.icone-rede-social {
  height: 50px; /*define a altura dos ícones*/
  width: 50px; /*define a largura dos ícones*/
  cursor: pointer; /*muda o cursor para indicar que os ícones são clicáveis*/
}

.icone-rede-social:hover {
  transform: scale(1.2); /*aumenta o tamanho do ícone ao passar o mouse*/
  transition: all 0.3s ease; /*adiciona uma transição suave para o efeito de hover*/
}

.icone-rede-social::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  transform: scale(0.9);
  z-index: -1;
}

.icone-rede-social:hover::before {
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--fonte);
  border-radius: 50%;
}

.icone-rede-social:hover {
  color: var(--fonte);
  box-shadow: 0 0 5px var(--fonte);
  text-shadow: 0 0 5px var(--fonte);
  border-radius: 50%;
}

.rodape-autoria {
  font-size: 1rem;
  font-weight: bold; /*define o peso da fonte do texto de autoria*/
  padding-top: 1rem; /*adiciona espaçamento interno ao redor do texto de autoria*/
}