:root {
    --padding-horizontal: 32px;
    --root-padding: 0 var(--padding-horizontal);
    --darkening-area-width: var(--padding-horizontal);
    --darkening-background: linear-gradient(270deg, rgba(10, 15, 45, .7), rgba(10, 15, 45, 0));
    --sidebar-scroll-wrapper-padding: 4px;
    --sidebar-width: 216px;
    --extra-offset: -4px
}

@media(max-width:1439px) {
    :root {
        --padding-horizontal: 24px;
        --extra-offset: 0
    }
}

@media(max-width:767px) {
    :root {
        --padding-horizontal: 16px
    }
}

@media(max-width:479px) {
    :root {
        --padding-horizontal: 8px;
        --sidebar-width: calc(100% - 40px)
    }
}

@media(max-width:339px) {
    :root {
        --sidebar-width: 100%
    }
}