@media(max-width:900px){

    .app{
        display:block !important;
    }

    .sidebar{
        width:100% !important;
        min-height:auto !important;
        border-right:none !important;
        border-bottom:1px solid #1f2937 !important;
    }

    .main{
        padding:16px !important;
    }

    .nav{
        display:flex !important;
        overflow-x:auto !important;
        gap:8px !important;
    }

    .nav a{
        white-space:nowrap !important;
        flex-shrink:0 !important;
    }

    .grid{
        grid-template-columns:1fr !important;
    }

    .band-card{
        flex-direction:column !important;
    }

    .post-actions,
    .comment-form{
        flex-direction:column !important;
    }
}

.mobile-menu-toggle{
    display:none;
}

@media(max-width:900px){

    .sidebar{
        position:relative;
    }

    .mobile-menu-toggle{
        display:block;
        position:absolute;
        top:18px;
        right:18px;

        background:#111821;
        color:white;

        border:1px solid #252f3f;
        border-radius:10px;

        padding:10px 14px;
        font-size:24px;

        cursor:pointer;
    }

    .sidebar .nav{
        display:none !important;
        margin-top:20px;
    }

    .sidebar .nav.open{
        display:flex !important;
        flex-direction:column !important;
    }
}

@media(max-width:900px){
    .topbar{
        flex-direction:column;
        align-items:stretch;
    }

    .topbar-search{
        max-width:none;
    }

    .topbar-user{
        justify-content:space-between;
    }
}

@media(max-width:1200px){

    .app{
        grid-template-columns:240px 1fr;
    }

    .rightbar{
        display:none;
    }

}