:root {
    /* HEADER */
    --header-height: 4rem;


    /* FOOTER */
    --footer-height: 3rem;
    --footer-border: 1px solid var(--footer-border-color);


    /* NAVIGATION */

    --navigation-transition: margin-left 0.15s, margin-right 0.15s, box-shadow 0.075s, transform 0.15s, width 0.15s, z-index 0s ease 0.15s;
    --navigation-width: 16rem;
    --navigation-narrow-width: 4rem;

    /* BODY */
    --light-rgb: 255, 0, 0;
    --dark-rgb: 79, 93, 115;
}



@media (min-width: 768px) {
    html:not([dir=rtl]) .sidebar.hide:not(.sidebar-end) {
        margin-left: calc(-1 * var(--navigation-width));
    }

    *[dir=rtl] .sidebar.hide:not(.sidebar-end) {
        margin-right: calc(-1 * var(--navigation-width));
    }

    html:not([dir=rtl]) .sidebar.hide.sidebar-end {
        margin-right: calc(-1 * var(--navigation-width));
    }

    *[dir=rtl] .sidebar.hide.sidebar-end {
        margin-left: calc(-1 * var(--navigation-width));
    }
}