*{ /*Reset Global*/
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root{ /*Paleta de Cores*/
    --bg: #0F0F1A;
    --gradiente-inicio: #7C3AED;
    --gradiente-fim: #A855F7;
    --texto: #F8FAFC;
    --card: #1A1A2E;
    --secundario: #64748B;
}

html{ /*Rolagem do conteudo HTML*/
    scroll-behavior: smooth;
}

body{ /*Corpo*/
    background-color: var(--bg);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
}

header{ /*Cabeçalho*/
    position: fixed;
    width: 100%;
    background-color: rgba(15, 15, 26, 0.9);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    z-index: 100;
}

nav{ /*Area dos links de navegação*/
    display: flex;
    justify-content: center;
    gap: 2rem;
}

nav a{ /*Links do menu de navegação*/
    color: var(--secundario);
    text-decoration: none; 
    cursor: pointer;
    transition: color 0.3s;
}

nav a:hover{ /*Links do menu de navegação ao passar o mouse*/
    color: var(--gradiente-fim);
    
}

section { /*Seção geral*/
    scroll-margin-top: 70px;
}

section#hero{ /*Seção Hero*/
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
}

section#hero h1{ /*Seção Hero h1*/
    font-size: 48px;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fim));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

section#hero p#funcao{ /*Seção Hero paragrafo com id função*/
    font-size: 20px;
    color: var(--texto);
    margin-top: 10px;
}

section#hero p#objetivo{ /*Seção Hero paragrafo com id objetivo*/
    color: var(--secundario);
    margin-top: 5px;
}

section#hero a{ /*Seção Hero Links*/
    display: inline-block;
    padding: 10px;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fim));
    color: var(--texto);
    text-decoration: none;
    border-radius: 7px;
    margin-top: 10px;
    transition: transform 0.3s;
}

section#hero a:hover{ /*Seção Hero Links ao passar o mouse*/
    transform: scale(1.05);
}

nav a.ativo { /*Links com class ativo no Nav*/
    color: var(--gradiente-fim);
}

section#sobre{ /*Seção sobre*/
    padding: 60px 10px;
    max-width: 800px;
    margin: 0 auto;
}

section#sobre h2{ /*Seção sobre h2*/
    margin-top: 20px;
}
section#sobre p{ /*Seção sobre paragrafo*/
    margin-top: 10px;
    line-height: 1.4;
}

section#habilidades{ /*Seção Habilidades*/
    padding: 60px 10px;
    max-width: 800px;
    margin: 0 auto;
}

section#habilidades h2{ /*Seção Habilidades h2*/
    margin-bottom: 10px;
}

section#habilidades div.grupo-skills{ /*Seção Habilidades area grupo skills*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

section#habilidades div.grupo-skills div{ /*Seção Habilidades area grupo skills, modificação individual das habilidades*/
    background-color: var(--card); 
    padding: 15px;
    border-radius: 7px;
    text-align: center;
    border: 1px solid transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

section#habilidades div.grupo-skills div:hover{/*Seção Habilidades area grupo skills, modificação individual das habilidades ao passar o mouse*/
    border: 1px solid var(--gradiente-fim)
}

section#projetos{ /*Seção Projetos*/
    padding: 60px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

section#projetos h2{ /*Seção Projetos h2*/
    margin-bottom: 12px;
}
section#projetos a{ /* Seção Projetos links*/
    text-decoration: none;
}

section#projetos a:hover{ /*Seção Projetos links ao passar o mouse*/
    text-decoration: underline;
    color: var(--texto);
}

div.grid-projetos{ /*Modificação do grid projetos*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

div.card-projeto{ /*Area do card projeto*/
    background-color: var(--card);
    border-radius: 7px;
    padding: 10px;
    border: 1px solid transparent;
    transition: transform 0.3s;
}

div.card-projeto img { /*Imagem dos projetos*/
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
    margin-top: 10px;
}

div.card-projeto:hover{ /*Area do card projeto ao passar o mouse*/
    transform: translateY(-5px);
}

section#contato{ /*Seção Contato*/
    padding: 60px 10px;
    max-width: 800px;
    min-height: 100vh;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section#contato a{ /*Seção Contato links*/
    display: inline-block;
    padding: 10px;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fim));
    color: var(--texto);
    text-decoration: none;
    border-radius: 7px;
    margin-top: 10px;
    transition: transform 0.3s;
}

div#botoes-contato{ /*Botões contato*/
    display: flex;
    gap: 20px;
}

.animar { /*Class animar*/
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animar.visivel { /*Class animar e class visivel*/
    opacity: 1;
    transform: translateY(0);
}


@media(max-width: 768px){ /*Mobile First*/
    h1{
        font-size: 32px;
    }

    div.grid-projetos{
        grid-template-columns: 1;
    }

    nav{
         gap: 1rem;
        font-size: 14px;
    }

    section#projetos{
        padding: 40px 5px;
    }
}