#sidebar-mask{
    
    position:fixed;
    width:100%;
    height:100vh;
    background:black;
    opacity:0.2;
    top:0px;
    left:0px;
}

#sidebar{
    
    #bar{
        
        position: fixed;
        top: 0px;
        z-index:1;
        width: 280px;
        color: #f7f7f7;
        height: 100vh;
        transition: left 250ms;
        background: #878787;
        
        ul{
            
            list-style: none;
            padding-left:0px;
            margin-top:80px;     
            
            li{
                
                a{
                    padding:10px;
                    padding-left:20px;                    
                    width:auto;
                    display:block;
                    color:#f7f7f7;
                    transition: background 250ms
                }
                
                a:hover{
        
                    background:gray
                }
            }
        }
    }
    
    .opened{

        left:0px;
    }
    .closed{
        
        left: -280px;
    } 

}
 
#sidebar-hamburger{
    
    background-image:url(../../../public/hamburger.png);
    width:19px;
    height:15px;
    opacity:0.5;
    cursor:pointer;
    transition: opacity 250ms;   
    position: absolute;
    top: 30px;
    left: 30px;
}

#sidebar-hamburger:hover{

    opacity:1;
       
}