* {
  margin: 0;   /* margem*/
  padding: 0;  /*espaçamento interno*/
  box-sizing: border-box; /* Garante que todas as caixas fiquem certinhas */
}

body {
  font-family: 'Times New Roman';
  background-color: #000000;
  color: #ffffff;
}

.intro-page {   /* Tela de introdução */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;  /* Coloca logo e título em uma coluna */
  justify-content: center; /* Centraliza verticalmente */
  align-items: center;     /* Centraliza horizontalmente */
  cursor:pointer ; /* Indica que é clicável */
  text-align: center;
}

.intro-page img {
  width: 100px; /* ajusta o tamanho da logo */
  height: auto; /* mantém proporção */ 
  display: block;
  margin-bottom: 20px; 
}

header {
  display: flex; /* Coloca logo e menu na mesma linha */
  padding: 20px 40px; /* Espaço interno do topo */
  justify-content: space-between;  /* Logo na esquerda, menu na direita */
  align-items: center; /* Centraliza verticalmente */
}

.menu { 
  list-style: none; /* Tira as bolinhas da lista */
  margin: 0; /* Sem margem */
  padding: 0; /* Sem espaçamento interno */
  display:flex; /* Itens em linha */
  gap: 10px; /* Espaço entre os itens */
  justify-content: flex-end; /* Alinha o menu à direita */
}

.menu a {
  text-decoration: none; /* Tira o sublinhado do link */
  font-weight: bold; /* Texto em negrito */
  color: #ffffff; /* Cor do texto */
  transition: 0.3s; /* Suavidade na troca de cor */
}

.menu a:hover {
  color: #f79400;
}

.hero {
  display: flex; /* Texto e imagem lado a lado */
  justify-content: space-between;
  align-items: center; /* Centraliza na vertical */
  padding: 50px; /* Espaço interno */
}

.logo img {
  width: 30px; /* ajusta o tamanho da logo */
  height: auto; /* mantém proporção */
  display: block;
  cursor:pointer ; /* Indica que é clicável */
}


.text h2 {
  font-size: 40px;
  color: #f79400;
}

.text h3 {
  font-size: 25px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  background: #f79400;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #f79400;
  background: transparent;
  border: 2px solid #f79400;
}

.image img {
  height: 300px;
  width: 300px;
  border-radius: 50%; /* Foto redonda */
  border: 5px solid #f79400;
}

/* Habilidades*/

/* Projetos */

/* Sobre Mim */

/* Contatos */
 .contact {
  display: flex; /* Itens em linha */
  justify-content: center; /* Centraliza verticalmente */
  cursor:pointer ; /* Indica que é clicável */
  gap: 30px;
  
 }