* {
            margin: 0;
            padding: 0;
        }
        
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #2B2B2B;
        }
        
        #main {
            width: 100%;
            height: 100%;
            position: fixed;
           
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .sidebar {
            position: absolute;
            top: 360px;
            left: 10px;
            z-index:999;
            display: flex;
            flex-direction: column;
            transition: all 1s;           
            
            
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        .sidebar ul li {
            margin-bottom: 10px;
        }

        .sidebar ul li a {
            text-decoration: none;
            color: #fefefe;
            display: block;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
        }

        .sidebar ul li a:hover {
            background-color: #82848a;
        }
        .sidebar .active {
            background-color: #82848a;
            border-radius: 5px;
        }