/* Resets básicos e fonte padrão */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CORRIGIDO: A letra 'b' foi removida daqui */
/* Cole este novo código no lugar do seu 'body' antigo */
body {
    font-family: 'Helvetica Neue', sans-serif;
    color: white;

    /* 1. O gradiente azul espacial continua aqui */
    background: linear-gradient(135deg, #1c2333, #0a041a);

    /* 2. Adicionamos a sua imagem de fundo */
    /* IMPORTANTE: Se sua imagem tiver outro nome, troque 'fundo.jpg' */
    background-image: url('img/fundo.jpg');

    /* 3. Ajustamos como a imagem se comporta */
    background-size: cover; /* Faz a imagem cobrir a tela toda */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Impede que a imagem se repita */
    background-blend-mode: overlay; /* Mistura a imagem com o fundo azul */

    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Container principal que centraliza tudo */
.container {
    width: 100%;
    max-width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilo da Foto de Perfil */
.profile-picture {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Deixa a imagem redonda */
    border: 3px solid white;
    object-fit: cover; /* Garante que a imagem não fique distorcida */
}

/* Estilo do Nome de Usuário */
.username {
    font-weight: 500;
    font-size: 1.2em;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Container dos Botões */
.links-container {
    width: 100%;
}

/* Estilo dos Botões de Link - NOVO ESTILO RETANGULAR */
.link-button {
    display: block;
    background-color: #2a2730; /* <-- Nova cor de fundo, mais escura e roxeada */
    color: white;
    padding: 18px;
    margin: 15px auto;
    width: 90%;
    max-width: 400px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    
    /* MUDANÇAS PRINCIPAIS AQUI */
    border-radius: 10px; /* <-- Bordas menos arredondadas para o formato retangular */
    border: 1px solid rgba(255, 255, 255, 0.2); /* <-- Borda fina e clara para dar definição */
    box-shadow: none; /* <-- Removemos a sombra antiga para um visual mais "flat" */

    /* Adicionamos transição para a cor da borda também */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease, border-color 0.2s ease;
}

/* Efeito ao passar o mouse sobre o botão - NOVO ESTILO */
.link-button:hover {
    transform: scale(1.03); /* Efeito de zoom um pouco mais sutil */
    background-color: #3c3847; /* Fundo fica um pouco mais claro */
    border-color: rgba(255, 255, 255, 0.5); /* Borda fica mais visível */
}

/* CORRIGIDO: O segundo bloco de .link-button:hover foi removido daqui */

/* Container dos Ícones de Redes Sociais */
.social-icons {
    margin-top: 30px;
}

/* Container dos Ícones de Redes Sociais - CÓDIGO ATUALIZADO */

.social-icons a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.8em; /* Tamanho dos ícones */
    margin: 0 15px;
    text-decoration: none;
    /* Linha atualizada para uma transição suave de cor E tamanho */
    transition: color 0.2s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: white;
    /* Linha adicionada para aumentar o tamanho do ícone */
    transform: scale(1.2);
}

/* ================================= */
/* Estilo da Nova Descrição          */
/* ================================= */
.description-container {
  margin-bottom: 30px; /* Cria um espaço entre a descrição e o primeiro botão */
}

.description-container p {
  font-size: 0.95em; /* Tamanho da fonte um pouco menor que o nome */
  font-weight: 400;  /* Fonte com peso normal (não negrito) */
  line-height: 1.5;  /* Espaçamento entre as linhas da descrição */
  color: rgba(255, 255, 255, 0.85); /* Um branco um pouco mais suave para diferenciar do nome */
}

/* ======================================= */
/* Estilo para Ícones SVG Personalizados   */
/* ======================================= */
.custom-svg-icon {
  width: 1em;      /* Faz a largura do ícone ser igual ao tamanho da fonte */
  height: 1em;     /* Faz a altura do ícone ser igual ao tamanho da fonte */
  vertical-align: -0.15em; /* Pequeno ajuste para alinhar o ícone na vertical com os outros */
}