*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:"Lucida Console", "Courier New", monospace;
}

html{
    scroll-behavior: smooth;/* moviemnto do scroll do mouse*/
}

:root{ /*root é a raiz do site, tabela das cores, quando quiser usar é so chamar o nome da cor...*/
    --primaria: #4f46e5;
    --secundaria: #7c3aed;
    --escuro: #0f172a;
    --maisEscuro: #0a0f1c;
    --claro: #e2e8f0;
    --vidro: rgba(255, 255, 255, 0.1);
}

body{
    display: flex;
    flex-direction: column;
    background-color: var(--escuro); /* cor do fundo*/
    color: var(--claro);/* cor da letra*/
}

.navegacao{
    position: fixed;
    top: 0;
    background-color: rgb(15, 23, 42, 0.8);
    width: 100%;
    z-index: 100; /*define quam fica na frente de quem*/
    padding: 1.5rem;
}


.menu{
    display: flex;
    justify-content: center;
    list-style: none;/* isso tira a bolinha da lista*/
    gap: 3rem; /*é o espeço entre as letras*/
    
}

.menu-link{
    text-decoration: none;/*é a linha que fica em baixo dos nomes. none tira as linhas*/
    color: var(--claro);
    font-weight: 500; /*é o negrito*/
    position: relative;
    padding: 0.5rem 0;
}

/* after > depois / before > antes */

.menu-link::after{
    content: '';
    height: 2px;
    width: 0; /* deixei zerado pra não aparecer a largura do traço, pq so quero que aparece quando passar o mouse*/
    position: absolute; 
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, var(--primaria), var(--secundaria));
    transition: width 0.5s ease; /*isso vai dar o efeito do traço indo pra direita*/
}

.menu-link:hover::after {
    width: 100%;
    
}

.cabecalho{
    min-height: 100vh;
    display: flex;
    justify-content: center; /*isso também deixa os item no centro*/
    align-items: center; /*isso deixa o item no centro*/
    
}

.hero-container{
   display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.hero-texto{
    max-width: 500px;
    text-align: center;
}
.hero-desc{
    text-align: center;
    margin-top: 20px;/*top pra dar espaço em cima*/
    margin-bottom: 20px;/*bottom pra dar um espaço em baixo*/
}


.foto-perfil{
    width: 350px;
    height: 450px;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.3); /*é a tag que da a sombra pro conteúdo*/
    border-radius: 10%;
    border: 4px solid var(--vidro);
    animation: flutuar 5s ease-in-out infinite;
    margin-top: 100px; /*essa tag colocar a foto pra baixo, ela ficava la em cima no topo, puxei ela pra baixa parq eu não ficasse 'dentro' do header.*/
    margin-left: 20px;
}

h1 {
    font-size: 3.5rem;
    color: var(--primaria);
    font-weight: bold;
    margin: 20px 0; /*o espaço sob as linhas, textos*/
}

.cabecalho-sub-titulo{
    font-size: 1.5rem; /*tamanho do texto*/
    color: var(--claro);
    margin: 10px 0;
    margin-top: 20px;
}

.botao-form1{
     color: var(--claro);
    background: linear-gradient(45deg, var(--secundaria), var(--primaria));
    padding: 1rem 4rem;
    border: none; /*none signifa nao ou nada, ou seja, nao vai ter borda no botão*/
    border-radius: 8px;
    font-weight: bold;
    width: auto;
    transition: all 0.5s ease;
    text-decoration: none;
    text-align: center;
}

.botao-form1:hover{
    box-shadow: 0 10px 25px rgba(70, 70, 229, 0.5);
}

.sobre{
   padding: 6rem 2rem; /*em cima e em baixo pra der espaçamento*/
  
   
}

.sobre-titulo{
    font-size: 3rem;
    color: var(--claro);
    text-align: center; /*isso centraliza o texto*/
    margin-bottom: 20px;
}

.sobre-caixa{
    padding: 2rem;
    max-width: 800px;/*pra ela nao crescer muito*/
    margin: 0 auto; /*usamos pra centralizar - '0' é em cima e em baixo, 'auto' é dos lados.*/
    border-radius: 16px; /*essa é a que tem a borda arredondada*/
    border: 1px solid var(--vidro);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);/*isso é um efeito que deixa meio transparente*/
}

.sobre-p{
    text-align: center;
    font-size: 1.0rem;
}

.habilidades{
     padding: 6rem 2rem;
}

.hab-titulo{
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px; /*é a distancia de baixo, entre a coluna e o texto*/
}


.hab-caixa{
    display: grid; /*grid conseguimos mexer a caixa de maneira manual?*/
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /*grid-template eu pedi pra ele criar colunas. repeatpta repetir todas as colunas, todas elas vão ser iguais. auto-fit enxcaixa ela na tela, pra que todas elas encaixam na tela. tamanho deles de no min de 300px, 1fr no maximo a tela toda. */
    gap: 1rem; /*elas estavam muito coladas. coloquei grap pra ajustar */
    max-width: 1200px; /*coloquei 1200px caso a tela for muito grande, quero que ela estique e fique no padrão.*/
    margin: 0 auto;
}

.hab-card{
     background: rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     backdrop-filter: blur(5px);
     border: 1px solid var(--vidro);
    overflow: hidden; /*ele esconde o que sobra da iamgem, se cria uma borda da caixa, mas a imagem fica pra fora, essa tag esconde e ajusta pra justar na caixa*/
    transition: all 0.5s ease; /*essa tag da um efeito lento*/
    cursor: pointer;
}

.hab-card:hover{
    box-shadow: 0 20px 20px rgba(79, 70, 229, 0.2);
    transform: translateY(-30px) scale(1.01);
    opacity: .5; /*isso vai dar um efeito de quando passar o mouse por cima, vai dar uma escurecida*/
}

.hab-img{
    height: 300px;
    width: 100%;
    object-fit: cover; /*como ele vai se encaixar respeitando os tamanhos heigth e width*/
}

.projetos{
    padding: 6rem 2rem;
}

.projetos-titulo{
     text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px; /*é a distancia de baixo, entre a coluna e o texto*/
}

.projetos-caixa{
     display: grid; /*grid conseguimos mexer a caixa de maneira manual?*/
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /*grid-template eu pedi pra ele criar colunas. repeatpta repetir todas as colunas, todas elas vão ser iguais. auto-fit enxcaixa ela na tela, pra que todas elas encaixam na tela. tamanho deles de no min de 300px, 1fr no maximo a tela toda. */
    gap: 2rem; /*elas estavam muito coladas. coloquei grap pra ajustar */
    max-width: 1200px; /*coloquei 1200px caso a tela for muito grande, quero que ela estique e fique no padrão.*/
    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; /*ele esconde o que sobra da iamgem, se cria uma borda da caixa, mas a imagem fica pra fora, essa tag esconde e ajusta pra justar na caixa*/
     transition: all 0.5s ease;
     cursor: pointer;
}

.projetos-card:hover{
     box-shadow: 0 20px 20px rgba(79, 70, 229, 0.2);
    transform: translateY(-30px) scale(1.01);
}

.projetos-img{
      height: 200px;
    width: 100%;
    object-fit: cover; /*como ele vai se encaixar respeitando os tamanhos heigth e width*/
}

.caixa-textos-projeto{
    padding: 1.5rem;
}

.info-projetos{
   margin-bottom: 5px;
}

.p-projetos{
     color: rgba(226,232,240,0.8);
    line-height: 1.25rem; /*essa tag é a altura da linha*/
}

.contatos{
    padding: 6rem 2rem;
}

.contatos-titulo{
      text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px; /*é a distancia de baixo, entre a coluna e o texto*/
}

.form-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;
}

.nome-form{
    width: 100%; /*vai ocupar 100% o espaço*/
    padding: 1.5rem; /*é o tamanho da barra do texto*/
    background: rgba(255, 255, 255, 0.05); /*é a cor da barra do texto*/
    border-radius: 8px; /*é a borda da barra de texto*/
    border: 1px solid var(--vidro);
    color: var(--claro);
    outline: none; /*isso tira a borda da barra de texto*/
}

.nome-form:focus{
  border: 2px solid var(--secundaria);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);

}

.grupo-form{
    margin-bottom: 1.5rem;
}

.botao-form{
    color: var(--claro);
    background: linear-gradient(45deg, var(--secundaria), var(--primaria));
    padding: 1rem 2rem;
    border: none; /*none signifa nao ou nada, ou seja, nao vai ter borda no botão*/
    border-radius: 8px;
    font-weight: bold;
    width: 100%;
    transition: all 0.5 ease;
}

.botao-form:hover{
    transform: translateY(-4px); /*ele vai fazer uma pequena transformação, levemente quando passa o mouse por cima*/
    box-shadow: 0 5px 15px rgba(70, 70, 229, 0.4);
}

.particulas{
    position: fixed; /*essa tag deixa a particula fixada*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.3;
    background:
        radial-gradient(circle at 10% 20%, var(--primaria) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, var(--secundaria) 0%, transparent 20%);
}

@keyframes flutuar{
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-2%);
    }
}

@keyframes flutuar1 {
    0%, 100%{ /* no 0 a 100, eu vou para o 0*/
        transform: translateY(0);
    }
    50%{ /*no ponto 50, eu vou pro - 10. Depois volto tudo dnv*/
        transform: translateY(-10%);
    }
}

.social-icons a{
box-shadow: 0 0 10px var(--primaria);
}
.social-icons a:hover{
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--primaria);
}

.footer{
    text-align: center;
    padding: 40px 20px;
    background: var(--maisEscuro);
}

.social-icons{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.social-icons a{
    width: 45px;
    height: 45px;
    background: var(--primaria);
    border-radius: 30%; /*borda dos icones*/
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--claro);
    font-size: 30px;
    text-decoration: none;
    margin: 10px;
}

.social-icons a:hover{
    background: var(--secundaria);
    transform: scale(1.2);
}

.email{
    margin-bottom: 10px;
    color: var(--claro);
    text-align: center;
}

.copy{
    color: var(--secundaria);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 768px){

.hero-container{
    flex-direction: column;
    text-align: center;
}

.foto-perfil{
    margin-left: 0;
    margin-top: 120px;
}

.menu{
    gap: 0.8rem;
    font-size: 12px;
}

}