/* ============================================================
 * MOBILE STYLES (up to 767px)
 * 
 * ui.css is naturally mobile-first, so most of your mobile 
 * styling is already done there. Use this file for 
 * overrides that should ONLY apply to mobile screens.
 * ============================================================ */

@media (max-width: 767px) {

    /* Add any mobile-only overrides here */
    .container {
        padding: 0;
    }

    .navbar {
        display: flex !important;
        margin-bottom: 0;

    }

    .navbar>div:first-child {
        justify-content: center;
    }

    .navbar>div:first-child>h2 {
        margin: auto;
    }

    .navbar>div:not(:first-child) {
        display: none;
        margin-top: var(--s-2);
    }

    .menu>div.menu {
        display: flex;
    }

    .profile>div.profile {
        display: flex;
    }




}