nav.css

*{
    margin: 0;
    padding: 0;
}
body{

    background-color: black;
    
}

/*......... For entire navbar......... */
#navbar{
    display: flex;
    /* flex-direction: row; */
    align-items: center;
    position: sticky;
    top: 0px;

}

/*.......... For altering  befor the navbar....... */
#navbar::before{
    content: "";
    background-color: rgb(219, 207, 207);
    position: absolute;
    top:0px;
    left:0px;
    height: 54px;
    width: 100%;
    z-index: -1;
    opacity: 0.11;
}

/*.......... For image in navbar......... */
.image img{
    width: 32px;
    height: 31px;
    border-radius: 40px;
    margin: 9px;
}

/* ..........For contents in navbar......... */
.contents ul{
    display: flex;
    flex-direction: row;
}

/* ............For li in ul in navbar........... */
.contents ul li {
    list-style: none;
    text-decoration: none;
    }
   
/*................ For href in li ............*/
.contents ul li a{
    list-style: none;
    text-decoration: none;
    color: white;
    margin: 35px;
}

/* for hovering */
.contents ul li :hover{
    color: black;
    background-color: rgb(223, 206, 206);
    border-radius: 5px;
    width: 20px;
}