/* Remove margens padrão do navegador e define a fonte principal do site */
body {
    margin: 0;                       /* Elimina o espaço padrão nas bordas da página */
    font-family: 'Lora', serif;      /* Define a fonte Lora (serifada) para todo o site */
    background-color: #000000;       /* Fundo preto em toda a página */
}

/* Estilo da barra de navegação (menu) */
.menu{
    backdrop-filter: blur(10px);     /* Desfoque de fundo para efeito de vidro fosco */
    background-color: rgb(184, 146, 14); /* Fundo dourado */
    padding: 2%;                     /* Espaçamento interno em todos os lados */
    margin: 0%;                      /* Remove margem externa */
    display: flex;                   /* Organiza os itens em linha (horizontal) */
    align-items: center;             /* Alinha os itens verticalmente ao centro */
    gap: 20px;                       /* Espaço de 20px entre cada item do menu */
    flex-wrap: wrap;                 /* Permite que os itens quebrem linha em telas pequenas */
}

/* Efeito ao passar o mouse sobre os links do menu */
.menu a:hover {
    opacity: 0.8;                    /* Deixa o link levemente transparente */
    transition: 0.3s;               /* Transição suave de 0.3 segundos */
}

/* Remove o marcador padrão (bolinha/número) das listas */
li{
    list-style: none;                /* Oculta o bullet point de cada item de lista */
}

/* Estilo padrão para todos os links da página */
a{
    text-decoration: none;           /* Remove o sublinhado dos links */
    padding: 0%;                     /* Remove padding interno */
    color: white;                    /* Cor do texto branca */
    font-weight: bold;               /* Texto em negrito */
}

/* Seção do banner principal (hero section) */
#banner{
    padding: 2%;                     /* Espaçamento interno */
    background-color: black;         /* Fundo preto, mantendo a identidade visual */
    display: flex;                   /* Layout em linha */
    gap: 30px;                       /* Espaço de 30px entre os elementos */
    align-items: center;             /* Alinha verticalmente ao centro */
    justify-content: center;         /* Centraliza horizontalmente */
}

/* Foto de perfil com formato circular */
.imagemDePerfil{
    border-radius: 50%;              /* Transforma a imagem em círculo */
}

/* Título principal — efeito de máquina de escrever via CSS */
#tituloPrincipal{
    color: white;                    /* Texto branco sobre fundo preto */
    overflow: hidden;                /* Esconde o texto que ainda não foi "digitado" */
    border-right: 2px solid #000;   /* Cursor piscante simulado pela borda direita */
    white-space: nowrap;             /* Impede quebra de linha durante a animação */
    width: 0;                        /* Começa com largura zero, vai crescendo até 100% */
    animation: typing 3s steps(30) forwards, blink 0.7s step-end infinite; /* Dispara as duas animações ao mesmo tempo */
}

/* Animação que expande a largura do título para revelar o texto letra a letra */
@keyframes typing {
  to { width: 100%; }               /* Vai de largura 0 até 100% simulando digitação */
}

/* Animação do cursor piscante (alternando transparência da borda) */
@keyframes blink {
  50% { border-color: transparent; } /* Na metade do ciclo, a borda some — efeito de piscar */
}

/* Saudação "Olá!!" exibida acima do título principal */
#oi{
    color: white;                    /* Texto branco */
}

/* Texto descritivo exibido no banner */
#corpoDoTexto{
    color: white;                    /* Texto branco */
}

/* Botão "Sobre mim" no banner */
.sobreBtn{
    border: 2px white;               /* Borda branca (sem estilo definido, apenas largura e cor) */
    padding: 1%;                     /* Espaçamento interno */
    cursor: pointer;                 /* Cursor de mão ao passar o mouse */
    transition: background 0.3s ease; /* Transição suave de cor de fundo */
    background-color: rgb(146, 30, 30); /* Fundo vermelho */
}

/* Link dentro do botão "Sobre mim" */
#btnS{
    color: white;                    /* Texto branco dentro do botão */
}

/* Efeito hover do botão "Sobre mim" */
.sobreBtn:hover {
  background: rgba(184, 146, 14, 0.4); /* Fundo dourado semitransparente ao passar o mouse */
}

/* Botão de download do currículo */
.btn-download {
  background-color: rgb(146, 30, 30); /* Fundo vermelho, igual ao botão "Sobre mim" */
  color: white;                      /* Texto branco */
  border: 2px white;                 /* Borda branca */
  padding: 1%;                       /* Espaçamento interno */
  cursor: pointer;                   /* Cursor de mão ao passar o mouse */
  transition: background 0.3s ease;  /* Transição suave de cor de fundo */
}

/* Efeito hover do botão de download */
.btn-download:hover {
  background: rgba(184, 146, 14, 0.4); /* Fundo dourado semitransparente ao passar o mouse */
}

/* Seção que exibe os projetos em carrossel */
.projetos{
    padding: 2%;                     /* Espaçamento interno */
    display: flex;                   /* Organiza os elementos em linha */
    align-items: center;             /* Alinha verticalmente ao centro */
    justify-content: center;         /* Centraliza horizontalmente */
    gap: 20px;                       /* Espaço de 20px entre os elementos */
}

/* Título da seção de projetos recentes */
#tituloProjeto{
    color: white;                    /* Cor do texto branca */
    text-align: center;              /* Centraliza o texto */
    padding: 1%;                     /* Espaçamento interno */
}

/* Container que envolve os cards de projeto (área deslizante) */
.containerProjeto{
    display: flex;                   /* Organiza os cards em linha */
    width: 350px;                    /* Largura fixa — mostra um card por vez */
    justify-content: center;         /* Centraliza os cards dentro do container */
    gap: 20px;                       /* Espaço entre os cards */
    margin: auto;                    /* Centraliza o container na página */
}

/* Estilo dos cards individuais de projeto no carrossel da página inicial */
#card1, #card2, #card3, #card4 {
    background-color: rgb(42, 123, 168); /* Fundo azul céu */
    padding: 20px;                   /* Espaçamento interno */
    border-radius: 10px;             /* Cantos arredondados */
    text-align: center;              /* Centraliza o conteúdo */
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2); /* Sombra suave ao redor do card */
    min-width: 300px;                /* Largura mínima de cada card */
    height: 250px;                   /* Altura fixa */
    flex-shrink: 0;                  /* Impede que o card encolha */
}

/* Link "Ver todos" abaixo do carrossel de projetos */
#verTodos{
    text-align: center;              /* Centraliza o texto */
    padding: 1%;                     /* Espaçamento interno */
}

/* Rodapé da página com informações de contato */
.rodape{
    background-color: rgb(110, 80, 20); /* Fundo dourado escuro */
    padding: 2%;                     /* Espaçamento interno */
    color: white;                    /* Cor do texto branca */
}

/* Seção "Sobre mim" na página sobre.html */
.sobreMim{
    padding: 20px;                   /* Espaçamento interno */
    color: white;                    /* Texto branco */
}

/* Grid de habilidades técnicas e interpessoais */
.habilidades{
    display: grid;                   /* Ativa o layout de grade */
    grid-template-columns: 1fr 1fr;  /* Duas colunas de tamanho igual */
    grid-template-rows: 1fr;         /* Uma linha */
    gap: 20px;                       /* Espaço entre os itens do grid */
}

/* Cards de habilidades técnicas e interpessoais */
#tech, #iPessoal{
    padding: 20px;                   /* Espaçamento interno */
    background: rgb(42, 123, 168);   /* Fundo azul céu */
    color: white;                    /* Texto branco */
}

/* Grid de cards da página de projetos (projetos.html) */
.proj{
    padding: 2%;                     /* Espaçamento interno */
    gap: 10px;                       /* Espaço entre os cards */
    display: grid;                   /* Ativa o layout de grade */
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Quatro colunas de tamanho igual */
}

/* Card individual da grade de projetos */
#card{
    background-color: rgb(146, 30, 30); /* Fundo vermelho */
    padding: 2%;                     /* Espaçamento interno */
    text-align: center;              /* Centraliza o conteúdo */
    height: 250px;                   /* Altura fixa */
    border-radius: 10px;             /* Cantos arredondados */
}

/* Grid de cards da página de cursos (cursos.html) */
.cursos{
    padding: 2%;                     /* Espaçamento interno */
    gap: 10px;                       /* Espaço entre os cards */
    display: grid;                   /* Ativa o layout de grade */
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Quatro colunas de tamanho igual */
}

/* Card individual da grade de cursos */
#crd{
    background-color: rgb(139, 108, 58); /* Fundo bege escuro */
    padding: 2%;                     /* Espaçamento interno */
    text-align: center;              /* Centraliza o conteúdo */
    height: 300px;                   /* Altura fixa (maior que os cards de projetos) */
    border-radius: 10px;             /* Cantos arredondados */
    color: white;                    /* Texto branco */
}

/* Imagem dentro dos cards de cursos */
#imgC{
    border-radius: 10px;             /* Cantos arredondados para combinar com o card */
}

/* Imagem dentro dos cards de projetos */
#imgP{
    border-radius: 10px;             /* Cantos arredondados para combinar com o card */
}