/*
 * ESTILOS GERAIS DO CORPO DA PÁGINA E CENTRALIZAÇÃO
 */
body {
    margin: 0; /* Remove margem padrão */
    background-color: #20d63e; /* Fundo verde claro */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* Fonte sans-serif para boa legibilidade */
    display: flex; /* Usa Flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Garante que ocupe toda a altura da tela */
    flex-direction: column; /* Alinha os itens em coluna */
    padding: 50px 0;   /* Espaçamento superior e inferior */
    background-image: url("../img/olhar.jpeg");  /* Imagem de fundo */
    background-repeat: no-repeat;/* Não repete a imagem */
    background-size: cover;/* Cobre toda a área */
    background-position: center;/* Centraliza a imagem */
    border: white;/* Cor da borda */
}

/*
 * ESTILO DO CARTÃO PRINCIPAL (ONDE FICAM A FOTO E INFORMAÇÕES)
 */
h1 {
    font-family: 'Times New Roman', Times, serif; /* Fonte clássica para o título */
    border-radius: 8px; /* Cantos arredondados */
    background-color: rgb(15, 106, 30); /* Fundo verde escuro */
    font-size: 30px; /* Tamanho da fonte */
    text-align: center; /* Centraliza o texto */
    border: 5px solid #ffffff; /* borda externa colorida */
    margin-top: 10px; /* Espaço acima do cartão */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */
    display: block; /* Cada link ocupa uma linha */
    color: white; /* Cor do texto */
}
 p {
    font-family: comiComic Sans MS, Comic Sans, cursive;/* Fonte casual para o texto */
    font-size: 16px; /* Tamanho da fonte */
    color: white; /* Cor do texto */
    text-align: center; /* Centraliza o texto */
    background-color: rgb(15, 106, 30);
    border-radius: 20px; /* Cantos arredondados */
    max-width: 300px; /* Largura MÁXIMA do cartão */
    width: 90%; /* Ocupa 90% da largura disponível, até o limite de 300px */
    border: 5px solid #fdfdfd; /* borda externa colorida */
    margin-top: 10px; /* Espaço acima do cartão */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */
    display: block; /* Cada link ocupa uma linha */
 }


 
#foto { 
    background-color:  rgb(15, 106, 30); /* Fundo branco simulando cartão */
    padding: 30px; /* Mais espaço interno para visualização */
    border-radius: 20px; /* Cantos arredondados */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2); 
    max-width: 300px; /* Largura MÁXIMA do cartão */
    width: 90%; /* Ocupa 90% da largura disponível, até o limite de 300px */
    text-align: center; /* Centraliza conteúdo */
    margin-bottom: 20px; /* Espaço abaixo do cartão */
    border: 5px solid #f6f6f6; /* borda externa colorida */
}

#foto img {
    width: 150px; /* Tamanho fixo para a imagem */
    height: 150px; /* Tamanho fixo para a imagem */
    border-radius: 30%; /* Imagem redonda */
    display: block; /* Remove espaço em linha */
    margin: 0 auto 15px auto; /*Centraliza a imagem e adiciona margem inferior */
    object-fit: cover; /* Garante que a imagem preencha o círculo */
    border: 6px solid #f1f1f1; /* Borda da foto para destaque */
    /* border-radius: 30px; Borda arredondada */
}

/* * ESTILOS PARA TEXTOS INTERNOS DO CARTÃO (SUGESTÕES) 
 * OBS: Se o seu HTML usar <H1> para o nome e <P> para o cargo.
 */
#foto h1 {
    font-size: 1.5em; /* Nome/Título */
    color: #333;/* Cor primária */
    margin: 5px 0 5px 0; /* Ajusta espaçamento */
}

#foto p {
    font-size: 1em; /* Cargo/Descrição */
    color: #666;/* Cor secundária */
    margin-bottom: 20px;/* Espaço abaixo do texto */
}


/*
 * ESTILO DA ÁREA DE REDES SOCIAIS
 */
#redes-sociais {
    background-color: rgb(15, 106, 30); /* Fundo branco para o cartão */
    padding: 20px; /* Espaçamento interno */
    border-radius: 15px; /* Cantos arredondados */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2); /* Sombra para destaque */
    max-width: 300px; /* Largura MÁXIMA */
    width: 90%; /* Ocupa 90% da largura disponível, até o limite de 300px */
    text-align: center; /* Centraliza o conteúdo */
    margin-top: 10px; /* Espaço acima do cartão */
    border: 5px solid #ffffff; /* borda externa colorida */
}

/* Estilo dos Links individuais dentro da div de Redes */
#redes-sociais a {
    display: block; /* Cada link ocupa uma linha */
    text-decoration: none;  /* Remove sublinhado */
    color: white; /* Cor do texto no link */
    font-weight: bold;  /* Negrito para destaque */
    background-color: #20d63e; /* Cor de fundo para simular um botão */
    padding: 10px 0;  /* Espaçamento interno */
    margin: 10px auto; /* Espaçamento entre os links */
    border-radius: 8px; /* Cantos arredondados */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */
}

#redes-sociais a:hover {
    background-color: #005f92; /* Efeito ao passar o mouse */
}

#whatsapp a {
    display: block; /* Cada link ocupa uma linha */
    text-decoration: none;  /* Remove sublinhado */
    color: white; /* Cor do texto no link */
    font-weight: bold;  /* Negrito para destaque */
    /* background-color: #20d63e; Cor de fundo para simular um botão */
    padding: 10px 0;  /* Espaçamento interno */
    margin: 10px auto; /* Espaçamento entre os links */
    border-radius: 8px; /* Cantos arredondados */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */
}
/*
 * ESTILO DO BOTÃO DE TROCA DE TEMA
 */
#trocar-tema {
    display: block;  /* Ocupa toda a largura disponível */
    margin: 20px auto 0 auto;   /* Centraliza horizontalmente com margem superior */
    padding: 10px 20px;  /* Espaçamento interno */
    border: none;  /* Remove borda padrão */
    border-radius: 5px;  /* Cantos arredondados */
    background-color: #20d63e;  /* Fundo verde */
    color: white;  /* Texto branco */
    cursor: pointer;  /* Cursor de ponteiro ao passar o mouse */
    transition: background-color 0.3s;   /* Transição suave para mudanças de cor */
}

#trocar-tema:hover {
    background-color: #4d5b60; /* Efeito ao passar o mouse */
}

/*
 * ESTILOS DO TEMA ESCURO (Aplicados quando a classe 'tema-escuro' é adicionada ao body pelo JavaScript)
 */
body.tema-escuro {
    background-color: #222; /* Fundo escuro */
    color: #f0f0f0; /* Texto claro */
}

body.tema-escuro #foto, 
body.tema-escuro #redes-sociais {
    background-color: #333; /* Fundo escuro para os cartões */
    box-shadow: 0 6px 15px rgba(0,0,0,0.5);  /* Sombra mais intensa */
}

body.tema-escuro #foto h1,
body.tema-escuro #foto p {
    color: #f0f0f0; /* Texto claro no tema escuro */
}

body.tema-escuro #redes-sociais a {
    background-color: #555; /* Fundo escuro para os links */
    color: #aaf; /* Texto claro */
}

body.tema-escuro #redes-sociais a:hover {
    background-color: #666; /* Efeito ao passar o mouse */
}

body.tema-escuro #trocar-tema { 
    background-color: #777; /* Fundo cinza */
    color: white; /* Texto branco */
} 

hr {
    color: black; /* Cor da linha horizontal */
}

#portfolio {
    display: block;  /* Ocupa toda a largura disponível */
    margin: 20px auto 0 auto;  /* Centraliza horizontalmente com margem superior */
    padding: 10px 40px;  /* Espaçamento interno */
    border: none;  /* Remove borda padrão */ 
    border-radius: 5px;  /* Cantos arredondados */
    background-color: #20d63e;  /* Fundo verde */
    color: white;  /* Texto branco */
    cursor: pointer;  /* Cursor de ponteiro ao passar o mouse */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */   
}


#email a {
    color: #070606; /* Cor do texto no link */
    text-decoration: none; /* Remove sublinhado */

}