@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap');

:root {
    --backgolor: #131B23;
    --selectcolor: #00A8E8;
    --backnavecolor:  #0D1217;
    --escrita: #F7F7FF;
    --escritafraca :#CCCCCC;

}

@keyframes text-slide {
    from {
        position: relative;
        left: -1000px;
    }
    to {
        position: relative;
        left: 0vh;
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand';
}


/* Estilos globais */
body {
    font-family: arial;
    background-color: var(--backgolor);
    margin: 0vh;
    color: var(--escrita);
    font-size: 1.4vh;
    text-align: justify;
    text-justify: inter-word;
}
html{
    scroll-behavior: smooth;
}

/*navebar */
.nav {
    position: fixed; /* Fixa a navbar no topo da página, mesmo ao rolar o conteúdo */
    z-index: 9999; /* Garante que a navbar fique acima de outros elementos na página */
    top: 0; /* Posiciona a navbar no topo da página */
    left: 0; /* Faz a navbar começar na borda esquerda */
    right: 0; /* Faz a navbar se estender até a borda direita */
    text-align: center; /* Centraliza o conteúdo de texto dentro da navbar */
    transition: top 0.3s; /* Adiciona uma transição suave para mudanças na propriedade 'top' */
    background-color: #0b0c11cc; /* Define a cor de fundo da navbar usando uma variável CSS */
    filter: drop-shadow(0vh 0.3vh 2vh #080808); /* Adiciona uma sombra projetada abaixo da navbar */
    font-size: 1vh; /* Define o tamanho da fonte como 1% da largura da viewport (responsivo) */
}

/* Linha da navbar */
.nav-row {
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse os limites do contêiner */
    transition: top 0.3s; /* Adiciona uma transição suave para mudanças na propriedade 'top' */
}

/* Opções da navbar (links ou botões) */
.nav-opc {
    display: inline-block; /* Exibe os itens em linha */
    position: relative; /* Necessário para que o ::after seja posicionado em relação ao .nav-opc */
    padding: 0.8vh 3vh; /* Espaçamento interno */
    text-align: center; /* Centraliza o texto */
}

/* Texto dos links da navbar */
.nav-text {
    color: var(--escrita); /* Define a cor do texto usando a variável CSS '--escrita' */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    transition: 0.3s; /* Adiciona uma transição suave para mudanças de estilo, como cor */
    font-size: 3vh;
    
}

.nav-opc::after {
    content: ''; /* Adiciona o elemento decorativo */
    height: 2px; /* Define a altura da linha */
    width: 0; /* Inicialmente, a linha tem largura 0 */
    position: absolute; /* Posiciona a linha em relação ao texto */
    bottom: 0; /* Alinha a linha na parte inferior do texto */
    left: 50%; /* Começa no centro do texto */
    transform: translateX(-50%); /* Centraliza a linha em relação ao texto */
    background: linear-gradient(90deg, #A55EEA, #00A8E8); /* Gradiente da linha */
    transition: width 0.3s ease; /* Adiciona uma transição suave ao aumentar a largura */
}

.nav-opc:hover::after{
    width: 100%;

}

/* Estilo ao passar o mouse sobre os links */
.nav-text:hover {
    color: var(--selectcolor); /* Altera a cor do texto para a variável '--selectcolor' ao passar o mouse */
    


}

/* Estilo ao clicar no link */
.nav-text:active {
    color: var(--escrita); /* Retorna a cor do texto para '--escrita' quando o link está ativo (clicado) */
}


/*botao nav bar*/
.language-botao {
    display: inline-block;
    width: 6vh;
    height: 5vh;
    text-decoration: none;
    margin: 0 1vh;
    border: none;
    background: none;
    cursor: pointer;
    transition: border 0.3s ease;
}

.language-botao img {
    width: 60%;
    height: auto;
}

.language-botao.selected {
    border: 0.3vh solid var(--selectcolor); /* Borda preta ao redor do botão selecionado */
    border-radius: 1vh; /* Opcional: bordas arredondadas */
}


/*cabeçalho title */
.cabecalho{
    min-width: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 15vh;
    padding: 20vh 2vh;
    text-align: center;
}

.foto-perfil{
    width: 38vh;
    height: 38vh;
    border-radius: 50%;
    border: 3px solid transparent;
    background: linear-gradient(#131B23, #131B23) padding-box,
                linear-gradient(to top, #00A8E8, #A55EEA) border-box;
    object-fit: cover; /* Garante que a imagem se ajuste ao contêiner */
    animation: flutuar 5s ease-in-out infinite;
}

/*layout para titulo perfil*/
.title {
    font-size: 5vh;
    font-weight: bold;
    background: -webkit-linear-gradient(25deg, #00A8E8, #A55EEA 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-slide;
    animation-duration: 1.2s;
    margin: 20px;
    text-align: center;
}

.sub-tittle{
    font-size: 2.5vh;
    color: var(--escrita);
    animation: text-slide;
    animation-duration: 1.2s;
    color:  var(--escritafraca);
    text-align: center;


}

.secao_divisao {
    color:#9e9e9e;
    padding: 180px 0px 180px 0px;
    text-align: center;
    font-size:2.3vh;
}

/* layout sobre */
.sobre{
    padding: 19vh 2vh;
}

.sobre-titulo{
    font-size: 5vh;
    font-weight: bold;
    background: -webkit-linear-gradient(25deg, #00A8E8, #A55EEA 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5vh;
    text-align: center;

}

.sobre-container{
    padding: 2vh;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid var(--escritafraca);
    backdrop-filter: blur(10px);
    background: var(--backnavecolor);
}

.sobre-para{
    text-align: center;
    font-size: 2.3vh;
    color:  var(--escrita);

}

/*Projeto */
.projetos {
    padding: 19vh 2vh;

}

.projeto-titulo{
    font-size: 5vh;
    font-weight: bold;
    background: -webkit-linear-gradient(25deg, #00A8E8, #A55EEA 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5vh;
    text-align: center;
}

.projeto-card:hover{
    box-shadow: 0 10px 20px rgb(165, 94, 234);
    transform: translateY(-10px) scale(1.03);

}


.projeto-caixa{
    display: flex;
    gap:1.2vh;
    margin: 0 auto;
    flex-wrap: wrap;
    ;
}



.projeto-card {
    background: var(--backnavecolor);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--escrita);
    overflow: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
    display: block; /* Garante que o link se comporte como um bloco */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: inherit; /* Mantém a cor do texto */
    max-width: 40vh
}



.projeto-img {
    width: 41vh;
    height: 25vh;
    object-fit: cover;

}



.titulo-projeto{
    margin-bottom: 15px;
    font-size: 2vh;
}

.espaco-projeto{
    padding: 1.5vh;
}

.para-projetos{
    font-size: 1.5vh;
    color: var(--escritafraca);
    line-height: 2vh;
    
}
.tecno{
    font-size: 1.5vh;
    font-weight: bold;
    background: -webkit-linear-gradient(25deg, #00A8E8, #A55EEA 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    padding: 20px;

}
.tecno-img {
    width: 5vh; /* Ajuste o tamanho da imagem */
    height: 5vh; /* Ajuste o tamanho da imagem */
}


/* skills */
.skills {
    padding: 21vh 2vh;
    text-align: center;
    background-color: var(--backgolor);
}

.skills-titulo {
    font-size: 5vh;
    font-weight: bold;
    background: -webkit-linear-gradient(25deg, #00A8E8, #A55EEA 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5vh;
    text-align: center;
}

.skills-container {
    display: flex;
    gap: 1.5vh;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}


.skill-card {
    background-color: var(--backnavecolor);
    border-radius: 10px;
    padding: 1.5vh;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--escrita);
    overflow: hidden;
    transition: all 0.5s ease;
}

.skill-card:hover {
    box-shadow: 0 10px 20px rgb(165, 94, 234);
    transform: translateY(-10px) scale(1.03);
}

.skill-name {
    margin-bottom: 1vh;
    font-size: 2vh;
    color: var(--escrita);
}

.skill-dots {
    display: flex;
    justify-content: center;
    gap: 0.5vh;
}

.dot {
    width: 2vh;
    height: 2vh;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: inline-block;
}

.dot.filled {
    background-color: #00A8E8;
}

.contato{
    padding: 19vh 2vh;
}

.contato-titulo{
    font-size: 5vh;
    font-weight: bold;
    background: -webkit-linear-gradient(25deg, #00A8E8, #A55EEA 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5vh;
    text-align: center;
}

.contato-texto{
    font-size: 2.3vh;
    color: var(--escritafraca);
    text-align: center;
}

.contato-caixa{
    display: flex;
    gap:1vh;
    margin: 0 auto;
    padding: 3vh;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
}


.contato-card:hover{
    box-shadow: 0 10px 20px rgb(165, 94, 234);
    transform: translateY(-10px) scale(1.03);

}
.contato-card {
    background: var(--backnavecolor);
    border-radius: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--escrita);
    overflow: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
    display: block; /* Garante que o link se comporte como um bloco */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: inherit; /* Mantém a cor do texto */
}



.git-img{
    width: 6vh;
    height: 6vh;
}

.email-caixa{  
    display: flex;
    gap:1vh;
    padding: 5vh;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    font-size: 2vh;
}

.email-card{
    background: var(--backnavecolor);
    border-radius: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--escrita);
    overflow: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
    display: block; /* Garante que o link se comporte como um bloco */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: inherit; /* Mantém a cor do texto */
    padding: 0 2.1vh;
}

.email-card:hover{
    box-shadow: 0 10px 20px rgb(165, 94, 234);
    transform: translateY(-10px) scale(1.03);

}
.copy-btn {
    margin-bottom: 3vh;
    padding: 3vh 2vh;
    background: var(--backnavecolor);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 2vh;
    transition: background 0.3s ease;
    border: 1px solid var(--escrita);
}

.copy-btn:hover {
    
    box-shadow: 0 10px 20px rgb(165, 94, 234);
    transform: translateY(-5px) scale(1.03);
}


.separador2 {
    margin-top: 2vh;
    margin-bottom: 5vh;
    border: none; /* Remove bordas extras */
    border-top: 1px solid #ccc; /* Define a linha horizontal */
}

.cv-caixa{
    display: flex;
    gap:1vh;
    padding: 5vh;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    font-size: 2vh;
}


.cv-card{
    background: var(--backnavecolor);
    border-radius: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--escrita);
    overflow: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
    display: block; /* Garante que o link se comporte como um bloco */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: inherit; /* Mantém a cor do texto */
    padding: 1vh 2.5vh;
}


.cv-card:hover {
    box-shadow: 0 10px 20px rgb(165, 94, 234);
    transform: translateY(-5px) scale(1.03);
}


.skills-container-icons {
    display: flex;
    flex-wrap: wrap; /* Permite que os ícones quebrem a linha */
    justify-content: center;
    gap: 20px; /* Espaçamento entre os ícones */
    padding: 20px 0;
}

.skill-box {
    display: flex;
    flex-direction: column; /* Ícone em cima, texto embaixo */
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: #131B23; /* Cor de fundo do card */
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-box:hover {
    transform: translateY(-5px); /* Efeito de levantar ao passar o mouse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.skill-box i {
    font-size: 48px; /* Tamanho do ícone */
}

.skill-box span {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
}