.mobile-header {

    display: none;

}



.sidebar {

    display: none;

    font-size: 1.6rem;

}



@media (max-width: 1000px) {



    .mobile-header {

        position: fixed;

        top: 0;

        right: 0;

        left: 0;

        background: var(--mainColor);

        color: white;

        padding: 15px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        z-index: 1001;

    }

    

    .mobile-header .hamburger {

        font-size: 24px;

        cursor: pointer;

    }

    

    .mobile-header .logo {

        width: 10vw;

    }

    .mobile-header .profile {
        width: 10vw;
        align-self: end;
        justify-self: end;
        filter: brightness(0) invert(1);
    }

    

    .sidebar {

        position: fixed;

        right: -250px;

        top: 0;

        height: 100%;

        width: 250px;

        background: #fff;

        box-shadow: -2px 0 5px rgba(0,0,0,0.2);

        transition: right 0.3s ease;

        z-index: 1002;

        display: unset;

        /* padding-top: 70px; */

    }

    

    .sidebar ul {

        list-style: none;

        padding: 0;

    }

    

    .sidebar li {

        padding: 15px;

        border-bottom: 1px solid #eee;

    }

    

    .sidebar li a {

        text-decoration: none;

        color: var(--mainColor);

    }



    .sidebar li a:hover {

        color: var(--hoverMainColor);

    }

    

    .overlay {

        display: none;

        position: fixed;

        top: 0; right: 0; bottom: 0; left: 0;

        background: rgba(0,0,0,0.4);

        z-index: 1000;

    }



}