style.css

/* Reset básico para remover margens e preenchimentos padrão */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif; /* Usa a fonte Inter */
    line-height: 1.6;
    color: #e0e0e0; /* Cor do texto claro para fundo escuro */
    background-color: #1a1a1a; /* Fundo preto */
    padding-top: 60px; /* Espaço para o menu fixo no topo */
}

/* Estilo do cabeçalho e navegação */
header {
    background: #007bff; /* Fundo azul escuro para o cabeçalho */
    color: #e0e0e0;
    padding: 1rem 0;
    position: fixed; /* Menu fixo no topo */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que o menu fique acima de outros elementos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra mais escura */
}

nav ul {
    list-style: none; /* Remove marcadores de lista */
    display: flex; /* Itens do menu lado a lado */
    justify-content: center; /* Centraliza os itens do menu */
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0 15px; /* Espaçamento entre os itens do menu */
}

nav ul li a {
    color: #e0e0e0; /* Cor do texto do link */
    text-decoration: none; /* Remove sublinhado */
    font-weight: 600; /* Peso da fonte */
    padding: 5px 0;
    transition: color 0.3s ease; /* Transição suave na cor */
}

nav ul li a:hover {
    color:#007bff; /* Cor ao passar o mouse */
    border-bottom: 2px solid #007bff; /* Sublinhado animado ao passar o mouse */
    background: #e0e0e0;
}

/* Estilo das seções de conteúdo */
.content-section {
    padding: 40px 20px;
    max-width: 960px; /* Largura máxima do conteúdo */
    margin: 20px auto; /* Centraliza a seção e adiciona margem */
    background: #282828; /* Fundo cinza escuro para as seções */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Sombra mais escura */
    border-radius: 8px; /* Cantos arredondados */
    display: none; /* Oculta todas as seções por padrão */
    opacity: 0; /* Começa invisível para a transição */
    transition: opacity 0.5s ease-in-out; /* Transição suave na opacidade */
    position: relative; /* Necessário para posicionar a imagem de fundo */
    overflow: hidden; /* Esconde partes da imagem que excedem a seção */
}

/* Remove o estilo da imagem de fundo */
.content-section .section-bg-image {
   display: none;
}


/* Exibe a seção que corresponde ao fragmento da URL (:target) */
.content-section:target {
    display: block; /* Exibe a seção alvo */
    opacity: 1; /* Torna a seção visível */
}

/* Estilo do título da seção */
.content-section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #007bff; /* Cor do título */
}

/* Estilo para parágrafos e listas dentro das seções */
.content-section p,
.content-section ul {
    margin-bottom: 20px;
}

.content-section ul {
    padding-left: 20px; /* Espaçamento para listas */
}

.content-section li {
    margin-bottom: 10px;
}

/* Estilo específico para a seção Sobre Mim */
#sobre .profile-info {
    display: flex; /* Usa flexbox para alinhar a foto e o texto */
    align-items: center; /* Centraliza os itens verticalmente */
    gap: 20px; /* Espaço entre os elementos */
    flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */
    justify-content: center; /* Centraliza horizontalmente em telas maiores */
}

#sobre .profile-info img.profile-photo {
    width: 150px; /* Largura da imagem */
    height: auto; /* Altura automática para manter proporção */
    border-radius: 50%; /* Deixa a imagem redonda */
    border: 3px solid #007bff; /* Borda colorida ao redor da imagem */
    flex-shrink: 0; /* Impede que a imagem diminua */
}

 /* Removido o estilo para a imagem de código */


#sobre .profile-text {
    flex-grow: 1; /* Permite que o texto ocupe o espaço restante */
     /* Removido text-align: center; daqui, pois já está na media query */
}

.social-icons {
    text-align: center; /* Centraliza os ícones */
    margin-top: 30px;
}

.social-icons a {
    color: #e0e0e0; /* Cor dos ícones */
    margin: 0 10px; /* Espaçamento entre os ícones */
    font-size: 1.8rem; /* Tamanho dos ícones */
    transition: color 0.3s ease; /* Transição suave na cor */
}

.social-icons a:hover {
    color: #007bff; /* Cor ao passar o mouse */
}


/* Estilo específico para a seção de contato */
#contato form {
    display: grid; /* Usa grid para organizar o formulário */
    gap: 20px; /* Espaçamento entre os campos */
    max-width: 600px; /* Largura máxima do formulário */
    margin: 0 auto; /* Centraliza o formulário */
}

#contato label {
    font-weight: 600;
    display: block; /* Label em sua própria linha */
    margin-bottom: 5px;
    color: #e0e0e0; /* Cor do texto do label */
}

#contato input[type="text"],
#contato input[type="email"],
#contato textarea {
    width: 100%; /* Campos ocupam a largura total do contêiner */
    padding: 10px;
    border: 1px solid #555; /* Borda mais escura para campos */
    background-color: #333; /* Fundo escuro para campos */
    color: #e0e0e0; /* Cor do texto nos campos */
    border-radius: 4px; /* Cantos arredondados para os campos */
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

#contato textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    min-height: 150px; /* Altura mínima para a área de texto */
}

#contato button {
    background-color: #007bff; /* Cor de fundo do botão */
    color: white; /* Cor do texto do botão */
    padding: 12px 20px;
    border: none;
    border-radius: 4px; /* Cantos arredondados para o botão */
    cursor: pointer; /* Cursor de mão ao passar sobre o botão */
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
}

#contato button:hover {
    background-color: #0056b3; /* Cor mais escura ao passar o mouse */
}

/* Estilo para links no portfólio (estilo GitHub-like) */
#portfolio .portfolio-item {
    background-color:#007bff; /* Fundo escuro para os itens do portfólio */
    border: 1px solid #555; /* Borda sutil */
    border-radius: 6px; /* Cantos arredondados */
    padding: 20px;
    margin-bottom: 20px; /* Espaço entre os itens */
}

#portfolio .portfolio-item h3 {
    color:#e0e0e0; /* Cor do título do projeto */
    margin-top: 0;
    margin-bottom: 10px;
}

#portfolio .portfolio-item p {
    color: #b0b0b0; /* Cor do texto da descrição */
    margin-bottom: 15px;
}

#portfolio .portfolio-item a {
    color:#e0e0e0; /* Cor do link */
    text-decoration: none;
    font-weight: 600;
    transition: text-decoration 0.3s ease;
}

#portfolio .portfolio-item a:hover {
    text-decoration: underline;
}

/* Estilo para a seção inicial (opcional, se quiser uma landing page) */
/* Se você não quiser uma seção inicial, a primeira seção no HTML será exibida por padrão */
/* Você pode adicionar um id="inicio" a uma seção e um link "#inicio" no menu */

/* Responsividade básica */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Empilha os itens do menu em telas menores */
        align-items: center; /* Centraliza os itens */
    }

    nav ul li {
        margin: 5px 0; /* Espaçamento vertical entre os itens */
    }

    body {
        padding-top: 120px; /* Ajusta o padding do body para acomodar o menu empilhado */
    }

    #sobre .profile-info {
        flex-direction: column; /* Empilha a foto e texto em telas menores */
        align-items: center; /* Centraliza os elementos */
    }

    #sobre .profile-text {
        text-align: center; /* Centraliza o texto em telas menores */
    }
}