.lateralD{
    background: var(--fundo2);
    width: 20rem;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-left: 1px solid var(--principal);
}
.lateralD p{
    color: var(--letras);
}

/* Perfil */
.perfil{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1rem 1rem -1rem var(--principal)46;
    z-index: 1;
}
.perfil h2{
    text-align: center;
    color: var(--letras);
    font-size: 1rem;
}
.nome{
    font-weight: 700;
    padding: 0.5rem;
}

/* gearl informações */
.info{
    background: var(--fundo1);
    padding: 0.7rem;
    overflow-y: auto;
}
.info::-webkit-scrollbar { width: 3px;}
.info::-webkit-scrollbar-track { background: #fff; }
.info::-webkit-scrollbar-thumb { border: 2px solid #575757; }

/* Linguagens */
.lingua{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0;
}
.porcento{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.barra{
    color: var(--principal);
    position: relative;
    overflow: hidden;
    font-size: 1.5rem;
}
.barra::before {
    content: attr(data-text);
    position: absolute;
    color: #ffffff;
    top: 0;
    right: -50%;
    animation: porcentoL 2s infinite linear reverse;
}
@keyframes porcentoL {
    0%{
        right: -50%;
    }
    100%{
        right: 100%;
    }
}

/* maisConhecimentos */
.maisConhecimentos{
    border-top: var(--principal) 1px solid;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
}

/* btn do CV */
.curriculo{
    display: flex;
    padding: 1rem 0;
}
.cv{
    margin: auto;
    padding: 0.5rem 1rem;
    color: var(--fundo2);
    background: var(--letras);
}
.cv:hover{
    filter: drop-shadow(0.2rem 0.2rem 0.2rem var(--principal));
}

/* Redes sociais */
.social{
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    box-shadow: 0 -1rem 1rem -1rem var(--principal)46;
    z-index: 1;
}
.social a{
    padding: 1rem;
}
.social i{
    padding: 1rem;
}
.social i:hover{
    filter: drop-shadow(0.3rem 0.3rem 0.5rem var(--principal));
}