/* 1. Reset e Variáveis Globais (Boas Práticas) */

:root {

    --cor-fundo: #121212;

    --cor-container: #1E1E1E;

    --cor-texto-primario: #FFFFFF;

    --cor-texto-secundario: #A7A7A7;

    --cor-acento: #0FDBA8;

    --cor-acento-hover: #0BA37D;

}

 

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

/* 2. Estilos do Corpo da Página (Layout Centralizado) */

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: var(--cor-fundo);

    color: var(--cor-texto-primario);

   

    /* Usamos Flexbox para centralizar nosso container na tela */

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 20px;

}

 

/* 3. Estilos do Container Principal */

.container {

    width: 100%;

    max-width: 600px;

    background-color: var(--cor-container);

    padding: 30px;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    text-align: center;

}

 

/* 4. Estilos do Cabeçalho (Perfil) */

.perfil {

    margin-bottom: 30px;

}

 

.perfil__foto {

    width: 200px;

    height: 200px;

    border-radius: 50%; /* Deixa a imagem redonda */

    border: 3px solid #0FDBA8;

    object-fit: cover; /* Garante que a imagem não fique distorcida */

    margin-bottom: 15px;

}

 

.perfil__texto h1 {

    font-size: 1.8rem;

    margin-bottom: 5px;

}

 

.perfil__texto p {

    font-size: 1rem;

    color: var(--cor-texto-secundario);

}

 

/* 5. Estilos da Seção de Links */

.links ul {

    list-style: none; /* Remove os pontos da lista */

}

 

.links li {

    margin-bottom: 15px;

}

 

.links a {

    display: block;

    background-color: #0FDBA8;

    color: var(--cor-texto-primario);

    padding: 15px;

    text-decoration: none;

    font-weight: bold;

    border-radius: 8px;

    transition: background-color 0.3s ease, transform 0.2s ease;

}

 

.links a:hover {

    background-color: #0BA37D;

    transform: scale(1.03); /* Efeito sutil de crescimento */

}

 

/* 6. Estilos do Rodapé */

.rodape {

    margin-top: 30px;

    font-size: 0.8rem;

    color: var(--cor-texto-secundario);

}

 

/* 7. Classe de Acessibilidade */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0;

}

 

/* ================================================= */

/* 5. NOVOS ESTILOS PARA A PÁGINA DE CONTATO         */

/* ================================================= */

.contact-form-section h2 {

    font-size: 1.5rem;

    color: var(--cor-texto-primario);

    margin-bottom: 0.5rem;

}

.contact-intro {

    color: var(--cor-texto-secundario);

    margin-bottom: 2rem;

}

.form-group {

    margin-bottom: 1.5rem;

    text-align: left;

}

.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

    color: var(--cor-texto-secundario);

}

.form-group input,

.form-group textarea {

    width: 100%;

    padding: 0.75rem;

    background-color: var(--cor-fundo);

    border: 1px solid #444;

    border-radius: 6px;

    color: var(--cor-texto-primario);

    font-size: 1rem;

    transition: border-color 0.2s ease;

}

.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--cor-acento);

}

.form-group textarea {

    resize: vertical;

    min-height: 100px;

}

.btn {

    display: block;

    width: 100%;

    background-color: var(--cor-acento);

    color: var(--cor-texto-primario);

    padding: 15px;

    text-decoration: none;

    font-weight: bold;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    font-size: 1rem;

    transition: background-color 0.3s ease, transform 0.2s ease;

}

.btn:hover {

    background-color: var(--cor-acento-hover);

    transform: scale(1.02);

}

.form-group textarea {
    resize: none;
    overflow: auto;
}

 

/* 6. Estilos do Rodapé (Adição de um estilo de link) */

.rodape {

    margin-top: 30px;

    font-size: 0.8rem;

    color: var(--cor-texto-secundario);

}

.rodape p {

    margin-top: 10px;

}

.nav-link {

    color: var(--cor-acento);

    text-decoration: none;

    font-weight: bold;

}

.nav-link:hover {

    text-decoration: underline;

}