/* 
  Define as variáveis CSS globais para cores e fonte.
  --cor-primaria: Cor de fundo principal do site.
  --cor-secundaria: Cor de destaque (usada em títulos e links).
  --texto: Cor padrão do texto.
  --cinza: Cor de fundo do header.
  --fonte: Fonte principal da página.
*/
:root {
  --cor-primaria: #1f1f1f;
  --cor-secundaria: #66ff00;
  --texto: #f4f4f4;
  --cinza: #333;
  --fonte: 'Segoe UI', sans-serif;
}

/* 
  Remove margens e paddings padrões de todos os elementos,
  e define box-sizing para border-box para facilitar o controle de tamanhos.
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 
  Define a fonte, cor de fundo, cor do texto e espaçamento padrão do corpo da página.
  text-decoration-thickness não é usual aqui, mas está definido como 10px.
*/
body {
  flex-wrap: wrap;
  font-family: var(--fonte);
  background-color: var(--cor-primaria);
  color: var(--texto);
  line-height: 1.6;
}
/* 
Estiliza o cabeçalho: cor de fundo, espaçamento interno, 
usa flexbox para alinhar itens e distribuir espaço.
*/
header {
  background: var(--cinza);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 
Define a cor do título principal do header.
*/
header h1 {
  color: var(--cor-secundaria);
}

/* 
Estiliza os links do menu de navegação: cor, espaçamento à esquerda,
remove sublinhado e adiciona transição suave na cor.
*/
nav a {
  color: var(--texto);
  margin-left: 1rem;
  text-decoration: none;
  transition: color 0.3s;
}

/* 
Altera a cor dos links do menu ao passar o mouse.
*/
nav a:hover {
  color: var(--cor-secundaria);
}

/* 
Define espaçamento interno, largura máxima e centraliza as seções principais.
*/
section {
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: auto;
}

/* 
Centraliza o texto da seção "home".
*/
#home {
  text-align: center;
}

/* 
Define tamanho e espaçamento do subtítulo da seção "home".
*/
#home h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* 
Define fundo, borda arredondada, espaçamento e margem para as seções "sobre" e "contato".
*/
#sobre {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  background-color: #2a2a2a;
  border-radius: 10px;
  padding: 2rem;
  margin-top: 2rem;
}

.texto-sobre {
  flex: 2;
  color: var(--texto);
}

.texto-sobre h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.imagem-sobre {
  flex: 1;
  display: flex;
  justify-content: center;
}

.imagem-sobre img {
  max-width: 250px;
  border-radius: 10px;
  object-fit: cover;
}

/* Responsivo */
@media (max-width: 768px) {
  #sobre {
    flex-direction: column;
    text-align: center;
  }

  .imagem-sobre img {
    max-width: 100%;
  }
}

/* 
Espaçamento inferior para títulos de seção.
*/
.titulo-secao {
  margin-bottom: 1rem;
}

/* 
Define layout em grid para a seção de projetos, 
com colunas responsivas e espaçamento entre os itens.
*/
#projetos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* 
  Estiliza cada projeto: fundo, borda arredondada, 
  esconde overflow e adiciona transição ao efeito hover.
*/
.projeto {
  background-color: #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
}

/* 
  Eleva levemente o card do projeto ao passar o mouse.
*/
.projeto:hover {
  transform: translateY(-5px);
}

/* 
  Define tamanho da imagem do projeto e ajusta o corte.
*/
.projeto img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* 
  Espaçamento interno para informações do projeto.
*/
.projeto-info {
  padding: 1rem;
}

/* 
  Cor de destaque para o título do projeto.
*/
.projeto-info h3 {
  color: var(--cor-secundaria);
}

/* 
  Estiliza links na seção de contato.
*/
#contato a {
  color: var(--cor-secundaria);
  text-decoration: none;
}

/* 
  Estiliza o rodapé: fundo escuro, cor do texto, centralização e tamanho da fonte.
*/
footer {
  background: #111;
  color: #aaa;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* 
  Responsividade: ajusta o header e navegação em telas pequenas.
*/
@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  nav {
    margin-top: 0.5rem;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--fonte);
  background-color: var(--cor-primaria);
  color: var(--texto);
  line-height: 1.6;
  text-decoration-thickness: 10px;
}

header {
  background: var(--cinza);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  color: var(--cor-secundaria);
}

nav a {
  color: var(--texto);
  margin-left: 1rem;
  text-decoration: none;
  transition: color 0.3s;
}

nav a:hover {
  color: var(--cor-secundaria);
}

section {
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: auto;
}

#home {
  text-align: center;
}

#home h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

#sobre, #contato {
  background-color: #2a2a2a;
  border-radius: 10px;
  padding: 2rem;
  margin-top: 2rem;
}

.titulo-secao {
  margin-bottom: 1rem;
}

#projetos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.projeto {
  background-color: #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
}

.projeto:hover {
  transform: translateY(-5px);
}

.projeto img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.projeto-info {
  padding: 1rem;
}

.projeto-info h3 {
  color: var(--cor-secundaria);
}

#contato a {
  color: var(--cor-secundaria);
  text-decoration: none;
}

footer {
  background: #111;
  color: #aaa;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  nav {
    margin-top: 0.5rem;
  }
}