*{
    margin: 0;
    padding:0 ;
    box-sizing: border-box;
    font-family: serif ;
}
html{
    scroll-behavior: smooth;
}

:root{
    --primaria: #4f46e5;
    --secundaria:#7c3aed;
    --escuro: #0f172a;
    --maisEscuro:#0a0F1C;
    --claro:#e2e8f0;
    --vidro:rgba(255, 255, 255, 0.1);
}

    body{
        background-color: var(--maisEscuro);/* Cor de todo o fundo do portfolio*/
        color: var(--claro); /*Cor das letras*/
    }
    
    .navegacao {
        position: fixed;
        background: rgba(15,23,42, 0.8); /*Cor transparente/ e este 0.8 no final = opacidade*/
        width: 100%; /*"fundo da largura*/
        z-index: 100; /*para aparecer na frente do restante da tela*/
        padding: 1.5rem;
        display: flex;
        justify-content: center;

    }

   .menu{
    display: flex; /* deixar as palavras uma na frente da outra*/
    list-style: none; /*tirar a marcação da frente de cada palavra da lista(a bolinha em frente)*/
    gap: 3rem; /*distanciamento entre as palavras*/
   }
   
    .menu-link{
        text-decoration: none; /*tirar a linha de marcacao em baixo da palavra*/
        color: var(--claro);
        font-weight: 500;
        position: relative;
        padding: 0.5rem;
    }

    .menu-link::after{ /* criando um alemento para cada link da classe .menu-link*/
        content: '';  /* ele é obrigatorio para os elementos aparecerem*/
        height: 2px; /*define a altura da linha == no caso vai ser a barrinha embaixo do link*/
        width: 0; /* comeca com largura zero, ou seja: a linha está invisível no início*/
        position: absolute;/*Está posicionando esse elemento de forma absoluta. Isso só funciona corretamente se o .menu-link tiver: position: relative declarado logo acima*/
        bottom: 0; /*Coloca a linha na parte de baixo do link.*/
        left: 0; /*Alinha a linha começando da esquerda*/
        background: linear-gradient(90deg, var(--primaria), var(--secundaria)); /* aqui é criado o degradê --- 90deg = da esquerda para a direita*/
        transition: width 0.5s ease; /*define uma animação suave quando a largura muda*/
    }
    .menu-link:hover::after{
        width: 100%; /*A linha cresce de 0 até 100% ==== Antes: linha invisível === Hover: linha “desenha” da esquerda pra direita*/
    }


    .cabecalho{
        min-height: 100vh; /*Esse elemento deve ter pelo menos a altura da tela inteira, ou seja, mesmo que o conteúdo esteja dentro de .cabecalho seja pequeno: Ele vai ocupar a tela inteira*/
        display: flex; /* superpoder que habilita a justify abaixo*/
        justify-content: center;
        align-items: center; /* essas duas propriedades perimitem que todos os items dentro do cabecalho fiquem alinhados - hoprizontal e vertical.*/
        flex-direction: column; /* Colocar as letragens abaixo da foto*/
    }



    .foto-perfil{
        width: 320px; /*largura*/
        height: 320px;/*Altura*/
        object-fit: cover; /* !!!!!!alinhar a imagem certinha dentro do circulo*/
        border-radius: 50%;
        box-shadow: 0 0 20px rgb(31, 30, 30); /* Pesquisando box shadow no google, voce consegue determinar como voce quer o a sua "sombra traseira".*/
        border-radius: 500px;
        border: 4px solid var(--vidro);
        object-position: 60% 77%; /* Isso me ajudou muito a conseguir alinhar a posicao da minha foto*/
        animation: flutuar 5s ease-in-out infinite; /* vindo direto do @keyframes flutuar = eu crio a animacao dentro da .foto-de-perfil e determino o tempo de flutuamento - começa, termina, começa e termina INFINITAMENTE*/
    }


    h1{
        font-size: 3.3rem;
        color: var(--primaria);
        font-weight: bold;
        margin: 5px;
    }
    .cabecalho-sub-titulo{
        font-size: 1.3rem;
        color: var(--claro);
    }

    .sobre{
        padding:6rem 2rem;
    }
    
    .sobre-titulo{
        text-align: center;
        font-size: 3rem;
        color: var(--claro);
    }

    .sobre-caixa{
        padding: 2rem;
        max-width: 800px;
        margin: 0 auto; /* eu consigo alinhar ao centro*/
        border-radius: 16px;
        border: 1px solid var(--vidro);
        backdrop-filter: blur(10px); /* para ter ter esse fundo "espelhado" dentro do subtitulo, eu necessito colocar esse background abaixo*/
        background: rgba(255, 255, 255, 0.05);

    }

    .sobre-paragrafo{
            text-align: center;
            font-size: 1.2rem;
    }
    


    
    
    
    
    .projetos{
           padding: 6rem 2rem;
    }

    .projetos-titulo{
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
    }

    .projetos-caixa{
            display: grid;/*habilitei o display: grid, com ele eu tenho alguns superpoderes*/
            grid-template-columns: repeat(2,1fr);/*grid-template-columns= crie colunas ==== repeat= todas elas vão se repetir ===== auto-fit= encaixa elas na tela ==== e qual o tamanho dela? o min300px e o maximo= 1fr - no caso a tela toda. ====== (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; /* caso o item fique grande demais, esse hidden esconde a sobra*/
            transition: all 0.5s ease;
          }


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


        .projetos-imagem{
            height: 200px;
            width: 100%;
            object-fit: cover; /* e como ele vai se encaixar, no caso estou dizendo para ele cobrir a area que ele esta, claro, respeitando os valores declarados acima*/
    }


    .caixa-textos-projetos{
        padding: 1.5rem;
    }
    
    
    .info-projetos{
         margin-bottom: 5px;
    }

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

   
   
   
   /*Parte dos contatos abaixo*/
   
    .contatos{
        padding: 6rem 2rem;
        
    }

    .contato-titulo{
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
    }

    .formulario-contato{
            text-align: center;    
            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;
    }

    

    .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 10px rgba(79, 70, 229, 0.3);
        transition: all 0.7s ease;
       
    }


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

    }

    .botao-form{
            color: var(--claro);
            background: linear-gradient(45deg, var(--primaria), var(--secundaria));
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            cursor: pointer; /* para quando colocar o mouse me cima*/
            width: 100%;
            transition: all 0.5s ease;
   }

   .botao-form:hover{
    transform: translateY(-4px);
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);
   }

    
   
   .particulas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.5;
    background:
    radial-gradient(circle at 10% 20%, rgb(27, 12, 163) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgb(27, 27, 27) 0%, transparent 20%),
    var(--maisEscuro);
   }

   @keyframes flutuar {  /*para criar o flutuar na foto de perfil*/
    0%, 100% {
        transform: translateY(0);
    }                            /*No ponto 0 e no ponto 100% eu vou pro zero, como se fosse uma rotação. Em 50& eu vou pro -20, e no 100% eu volto pro 0.*/
    50%{
        transform: translateY(-20px);
    }
   }