/* Styles for screen with a width up to 480px - Mobile (portrait) */
@media screen and (max-width: 480px) {

    :root {
        --collapsed-sidebar-width: 0;
        --expanded-sidebar-width: 100vw;

        --header-height: 4rem; /* On mobile we have more vertical real-estate and things look better with a thicker header */

        --sidebar-button-size: var(--header-height); /* Normally this value = --collapsed-sidebar-width, but we've set that to 0 for mobile, so match header instead */
    }

    .header-sidebar-toggle {
        display: flex; /* Show the sidebar toggle in the header on mobile, by default it's hidden and shown in the sidebar instead but on mobile the sidebar is fully collapsed */
    }
}


/* Styles for screen with a width which falls in the range of 481px-768px - Mobile (landscape) and Tablet (portrait/landscape)*/
@media screen and (min-width: 481px) and (max-width: 768px) {

    .indi-sidebar.expanded #AboutButtonText {
        display: inline !important;
    }
}


/* Styles for screen with a width which falls in the range of 769px-1024px - Tablet (landscape) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
}


/* Styles for screen with a width above 1024px - Tablets, laptops, PCs */
@media screen and (min-width: 1025px) {

    #SidebarSitesNavButton {
        display: none;
    }
}