header{
    width: 100%;
    height: 10vh;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;

    background-color: var(--cor-fundo);
}


.Separador{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    padding-left: 5vw;
    padding-right: 5vw;


    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    background-color: var(--cor-fundo);
}

.title{
    font-size: 80%;
    z-index: 10;
    color: var(--cor-letra); /* Cor do texto */
}



.navigation{
    display: flex;
    gap: 20px;
    transition: 0.15s;
}

.navigation a{
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-bottom: 2px; /* Reservar espaço para o sublinhado */
    transition: 0.3s;
    
}
    
.navigation a::after{
   content: "";
   display: block;
   background: var(--color-activeLetra);
   width: 0%;
   height: 2px;
  
   transition: 0.3s;
   
}

.navigation a:hover::after{
    width: 100%;
 }


.navigation a:hover{
    color: var(--color-activeLetra);
    
}


.Logos{
    display: flex;
    gap: 1vw;
}


ul{
    list-style: none;
    padding: 0;
}

.Logo{
    position: relative;
    width: 35px;
    height: 35px;

    background-color: black;
    border-radius: 80%;

    transition: all 0.15s ease-in-out;
}


#Instagram{
   
    fill: var(--cor-letra);
}

#Linkedin{
   fill: var(--cor-letra);
}

#GitHub{
   
    fill: var(--cor-letra);
}


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

#Instagram:hover{
    
    fill: #E1366C;
}

#GitHub:hover{
 
    fill: white;
}

#Linkedin:hover{
    fill: #0e76a8 ;
}


.configMob{
    width: 100%;
    height: 100vh;

    flex-direction: column;
    align-items: center;

    position: absolute;
    left: 0;
    top: 0;

    z-index: 9;

    display: none;
    backdrop-filter: blur(10px);
}

.configsvg{
    display: none;
    z-index: 10;
}

.configsvg svg{
    fill: white;
    width: 2em;
    height: 2em;
    
}

.configsvg:hover{
    cursor: pointer;
}




/*tela com 930px*/
@media screen and (max-width: 930px){
    
    .navigation, .Logos{
        display: none;
    }

    .Separador{
        justify-content: space-evenly;
    }

    .configsvg{
        display: block;
    }

    /*barra de navegação mobile*/
    .configMob{
        display: none;
        justify-content: space-evenly;
    }

    .configMob .navigation{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .configMob .Logos{
        margin: 0;
        border: 0;
        padding:0;
        
        display: flex;
        justify-content: center;

    }

}

/*tela com 730px*/
@media screen and (max-width: 730px){
   
    .navigation, .Logos{
        display: none;
    }

    .Separador{
        justify-content: space-between;
    }

    .configsvg{
        display: block;
    }


    /*barra de navegação mobile*/
    .configMob{
        display: none;
        justify-content: space-evenly;
    }

    .configMob .navigation{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .configMob .Logos{
        margin: 0;
        border: 0;
        padding:0;
        gap: 0;

        display: flex;
        justify-content: center;

    }
}