navBar.css

#navbar, #navbar *{
    
    padding: 0%;
    box-sizing: border-box;
}

.navbar-custom {
    background-color: #4CAF50;
    border-bottom: 3px solid rgba(51, 108, 65, 0.96);
}

#navbar{
    display: flex;
    align-items: center;
	min-height:45px;
    background-color: #4CAF50;
    background-attachment: fixed;
	border-bottom: 3px solid rgba(51, 108, 65, 0.96);
	margin:0%;
}

.logo{
    margin: 0px 34px 0px ;
}

#logo img{
    height : 60px;
    margin: 0px;
}

#navbar ul{
    display: flex;
}

#navbar ul li{
    font-size: 1.3rem;
    list-style: none;
	vertical-align: middle;

}

#navbar ul li #now{
	color:rgb(4, 85, 44);
	font-weight:bold;
}

.navbar .nav-item{
	color:white;
    text-decoration: none;
    padding: 3px 22px;
    display:block;
    border-radius: 20px;
}

/* #navbar .nav-item:hover{
	/* color:rgb(3, 105, 52); */
    /*background-color: white;
	font-weight: bold;
	
} */

.navbar .nav-item:hover + .navbar-custom .nav-item {
    color:rgb(3, 105, 52);
}


.logout{
    position: absolute;
    right:5%;
}


#navbar i{
	color:#006235 ;
	width: 38px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
}

#navbar ul li a i:hover{
	color:rgb(3, 105, 52);
}

.burger{
    display: none;
    position: absolute;
    right:5%;
    opacity:0.75;
    border-radius: 3px;
    width: 30px;
   
}

.burger div{
    width:25px;
    height:3px;
    background-color: white;
    margin: 3px;
    border-radius: 1.5px;
    transition: all 0.3s ease;
}






@media screen and (max-width:990px){

    body{
        overflow-x: hidden;
    }
    
    
    #navbar ul{
        margin-top: 0%;
        position: absolute;
        right:0px;
        height: 150 px;
        top:67px;
        background-color:#4CAF50 ;  
        flex-direction: column;
        align-items: center;
        width: 200px;
        border:1px solid rgba(51, 108, 65, 0.96);
    
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;

        z-index: 12;
        /* transform: translateX(100%); */
        transition: transform 0.3s ease;
        /* display: none; */
        /* pointer-events: none;
        opacity: 0;
        transform: translateY(15px); */

    }

    
    #logo img{
        align-items: center;
    }

    #navbar ul li{
        justify-content: space-between;
        padding-top: 6px;
        padding-bottom: 6px;
        /* opacity:0;         */
    }

    .logout{
        position: relative;
    }

    .burger{
        display: block ;
    }

    .burger:hover{
        cursor: pointer;
        opacity: 1;
        background-color: rgba(110, 179, 127, 0.96);

    }
/* 
    .burger button:focus + #nemesis{
        pointer-events: all;
        opacity: 1;
    } */

    /* .nav-active{
        transform: translateX(0); }*/
    

    
}

/* @keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    
    to{
        opacity: 1;
        transform: translateX(0px);
    }
} */

.toggle .line1{
    transform: rotate(-45deg) translate(-5px, 6px)
}

.toggle .line2{
    opacity:0;
}

.toggle .line3{
    transform: rotate(45deg) translate(-5px, -6px)
}