.naviguation {
    background: var(--background);
    width: 100%;
    padding: 2vh 0vh 5vh 2vh;
    max-width: fit-content;
}

.nav-profile {
    display: flex;
    align-items: center;
    margin-bottom: 5vh;
}

.nav-profile img {
    width: 5vh;
    border-radius: 50px;
    margin-right: 1vh;
    box-shadow: 0px 4px 20px 0px rgb(242 90 41 / 60%)
}

.nav-profile p {
    font-weight: 600;
}

.nav-searchBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #e7e6e6;
    padding: 1vh 1vh;
    border-radius: 10px;
}

.nav-searchBar input {
    padding: 1vh 0vh;
    outline: none;
    border: none;
    background: #e7e6e6;
}

.nav-btnNaviguation {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    margin-top: 3vh;
    flex-grow: 1;
}

.btnNav{
    display: flex;
    align-items: center;
    padding: 0.5vh 1.5vh;
    flex-direction: row;
    margin: 0vh 0vh 3vh 0vh;
    border-radius: 10px;
    transition:0.5s;
    cursor:pointer;
}

.btnNav.selected{
    background: #8146ff;
    color: white;
    box-shadow: 0px 4px 80px 0px rgba(128, 69, 255, 0.40);
    fill: white;
}

.btnNav svg {
   margin-right: 2vh;
   color:black;
   fill:black;
   transition:0.5s;
}

.btnNav.selected svg {
   color:white;
}
.btnNav:hover svg {
   fill: white;
}
.btnNav:hover {
    background: #5930b1;
    color: white;
    box-shadow: 0px 4px 80px 0px rgb(89 48 177 / 31%);
    
}

.bottomNaviguationBtn {
    margin-top: auto;
}