/* HTML */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --primaria: #3be01a;
    --secundaria: #68e096;
    --escuro: #01040c;
    --menosEscuro: #0a0c01;
    --claro: #e2e8f0;
    --vidro: rgba(255, 255, 255, 0.1);
}

body {
    /* Efeito degrade na pagina*/
    background: linear-gradient(
        to bottom,
        #000000,
        #0d1117,
        #161b22
    );
    color: var(--claro);

    padding-top: 90px;
}

/* MENU */
.nav {
    position: fixed;
    top: 0;
    background: var(--menosEscuro);
    width: 100%;
    z-index: 100;
    padding: 1.5rem;

}

.menu {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3rem;
}

.menu_topicos {
    text-decoration: none;
    color: var(--primaria);
    font-weight: 500;
    position: relative;

    padding: 0.5rem 0;
}


.menu_topicos::after {
    content: '';

    height: 2px;
    width: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, var(--primaria), var(--secundaria));
    transition: width 0.5s ease;
}

.menu_topicos:hover::after {
    width: 100%;
}

/* FOTO E SOBRE MIM*/
.perfil {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    /* Espaço entre a foto e o texto */
    padding: 6rem;
}

.foto_perfil {
    width: 300px;
    height: 450px;
    box-shadow: 0 0 10px var(--secundaria);
    border-radius: 10%;
    border: 4px solid var(--vidro);
    object-fit: cover;
    /* Evita distorção da imagem */
    animation: flutuar 5s ease-in-out infinite;
    /* easy-in-out é começando lentamente e acelerando no meio, infinite determina que vai ser infinita*/

}

@keyframes flutuar {

    /* @keyframes vai criar animação, flutuar eu dei o nome pois vai ser assim*/
    0%,
    100% {
        /* No momento 0 e no momento 100 do movimento*/
        transform: translateY(0);
        /* Ele vai movimentar no eixo Y 0*/
    }

    50% {
        /* No meio do moviemento que é 50%*/
        transform: translateY(-20px);
        /* Ele vai se mexer 20 pixel no eixo Y*/
    }

}

.perfil_texto {
    max-width: 500px;
}

h1 {
    font-size: 2.5rem;
    color: var(--primaria);
    font-weight: bold;

    margin-left: rem;
    /* empurra para a direita */

}

.perfil_caixa {
    padding: 1rem;
    max-width: 850px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid var(--vidro);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}


/* PROJETOS */



.projetos {
    padding: 6rem 2rem;
}

.projetos_titulo {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--primaria);

}

.projetos_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.projetos_card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    border: 1px solid var(--vidro);
    overflow: hidden;
    transition: all 0.5s ease;
    cursor: pointer;

}

.projetos_card:hover {
    /* Quando passa o mouse em cima e acontece uma animação*/
    box-shadow: 0 3px 7px var(--secundaria);
    transform: translateY(-7px) scale(1.03);
    /* Transform ele fala que isso vai movimentar, translate vai definir onde moveimenta que é no eixo Y (Y é vertical, X é horizontal e Z é profundidade), -10px é o que vai ser movimentado (Então vai subir 10 PX para cima pois é -10 e scale() muda a escala para deixar ele maior (Dar o ênfase). */

}

.projetos_imagem {
    height: 350px;
    width: 100%;
    object-fit: cover;
}

.caixa_textos_projetos {
    padding: 1.5rem;
}

.titulo_projeto {
    margin-bottom: 5px;
}

.paragrafo_texto {
    color: rgba(226, 232, 240, 0.8);
    line-height: 1.25rem;

}

/* EXPERIENCIAS*/

.experiencias {
    padding: 6rem 2rem;
}

.experiencias_titulo {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--primaria);
}

.conjunto_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    max-width: 900px;
    /* deixa mais equilibrado */
    margin: 0 auto;
}




.formacao_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

}

.formacao_titulo {
    margin-bottom: 5px;
    text-align: center;
}


.formacao_ano {
    margin-bottom: 5px;
}

.formacao_escrita {
    color: rgba(226, 232, 240, 0.8);
    line-height: 1.25rem;
}






.trabalho_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

}

.trabalho_titulo {

    margin-bottom: 5px;
    text-align: center;

}

.trabalho_ano {
    margin-bottom: 5px;
}

.trabalho_escrita {
    color: rgba(226, 232, 240, 0.8);
    line-height: 1.25rem;

}



.card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    border: 1px solid var(--vidro);

    transition: all 0.5s ease;
    cursor: pointer;
    width: 100%;
    max-width: 350px;
    padding: 1rem;
}

.card:hover {
    box-shadow: 0 3px 7px var(--secundaria);
    transform: translateY(-7px) scale(1.03);
}

/* HABILIDADES*/

.habilidades {
    padding: 6rem 2rem;
}

.habilidades_titulo {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--primaria);
}

.hard-skills_box {
    padding: 0.5rem;
}

.hard-skills_titulo {
    text-align: center;
    padding: 0.5rem;
    font-size: 2.0rem;
}

.hard-skills_icones {
    padding: 1rem;
    text-align: center;
    max-width: 850px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid var(--vidro);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.fa-html5 {
    font-size: 2.5rem;
}

.fa-css3-alt {
    font-size: 2.5rem;
}

.fa-php {
    font-size: 2.5rem;
}

.fa-database {
    font-size: 2.5rem;
}

.soft-skills_box {
    padding: 0.5rem;

}

.soft-skills_titulo {
    text-align: center;
    padding: 0.5rem;
    font-size: 2.0rem;

}

.soft-skills_escrita {
    padding: 1rem;
    max-width: 850px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid var(--vidro);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);

}

.lista_soft-skills {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    /* duas colunas */
    gap: 0.8rem 3rem;
    /* espaço entre linhas e colunas */
    padding-left: 3rem;
}

/* CONTATOS */

.contato {
    padding: 6rem 2rem;
}

.contato_titulo {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--primaria);
}

.formulario_contato {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    padding: 2rem;
    border: 1px solid var(--vidro);
    border-radius: 16px;
}

.grupo_form {
    margin-bottom: 1.5rem;
}

.campo_form {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: var(--claro);
    border: 1px solid var(--vidro);
    outline: none;
}

.campo_form:focus {
    border-color: var(--secundaria);
    box-shadow: 0 0 1px var(--claro);

}

.botao_form {
    color: var(--escuro);
    font-weight: bold;
    font-size: 1.0rem;
    background: linear-gradient(45deg, var(--primaria), var(--secundaria));
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: all 0.5s ease;
}

.botao_form:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 15px var(--secundaria);
}

.botoes_links {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 2rem;
    font-size: 50px;

}



.github {
    color: var(--claro);
    transition: all 0.5s ease;
}

.github:hover {
    transform: translateY(-2px);
}

.linkedin {
    color: var(--claro);
    transition: all 0.5s ease;
}

.linkedin:hover {
    transform: translateY(-2px);
}


section {
    position: relative;
    /* Qualquer elemento position: absolute dentro da section vai se posicionar usando ela como referência. Sem isso, as linhas poderiam ir parar no topo da página inteira.*/
}

section::before,
section::after {
    /* Esses são pseudo-elementos. Eles criam elementos invisíveis no HTML, como se você tivesse escrito: <div class="linha-topo"></div> | <div class="linha-fundo"></div>  | Mas sem precisar colocar nada no HTML*/
    content: ""; /* Pseudo-elementos só aparecem se tiver content. Mesmo vazio, isso ativa o elemento.*/
    position: absolute; /* Agora eles ficam “flutuando” dentro da section. Como a section é relative, eles usam ela como base.*/
    left: 0; /* Isso faz a linha ocupar toda a largura da section.*/
    width: 100%; /* Isso faz a linha ocupar toda a largura da section.*/
    height: 1px; /* Define que é uma linha bem fina. Se colocar 2px, fica mais grossa.*/
    background: linear-gradient(90deg, transparent, var(--primaria), transparent); /* 90deg -> horizontal | transparent -> começa transparente | cor = escolhe a cor no meio | termina transparente | Visualmente falando fica: ----- cor escolhida -----*/

}

section::before { 
    top: 0; /* Coloca a linha no topo.*/
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

section::after {
    bottom: 0; /*  Coloca a linha no final.*/
    /* Encurtar a linha*/
    width: 80%; /* Tamanho dela */
    left: 50%;  /* Posicionamento no ccentro*/
    transform: translateX(-50%); /* Quando vai ficar*/
}

.menu-toggle { /* Esconde as tres linhas quando for desktop*/
    display: none;
    background: none;
    border: none;
    color: var(--primaria);
    font-size: 2rem;
    cursor: pointer;
}




/* ================= Celular/Tablet ================= */
@media (max-width: 768px) {

    /* NAV */
    .menu {
        display: none;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        margin-top: 1rem;
    }

    .menu.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .nav {
        padding: 1rem;
    }

    /* PERFIL */
    .perfil {
        flex-direction: column;
        padding: 8rem 1.5rem 3rem 1.5rem;
        text-align: center;
        gap: 2rem;
    }

    .perfil_texto {
        max-width: 100%;
    }

    .foto_perfil {
        width: 220px;
        height: 320px;
    }

    /* SOFT SKILLS */
    .lista_soft-skills {
        grid-template-columns: 1fr;
        padding-left: 1rem;
    }

}