:root {
--site-font: Manrope, sans-serif;
--heading-font: League Spartan, sans-serif;
--footer-height: 200px;
--border-color: #505050;
--brand-a-bg: #10141b;
--brand-a-hilite: #ffffff;
--brand-b-bg: #5eb843;
--brand-b-hilite: #3a7e26;
--brand-b-color: #d1d1d1;
--generic-btn-hilite: #777;
--generic-btn-color: #000;
--generic-hover-color: #fff;
--standard-padding: 0 1em;
--generic-btn-bg: #000;
--footer-font: Manrope, sans-serif;
--brand-a: #3c89d1;
--brand-a-color: #ffffff;
--brand-a-hover: #1662b3;
--brand-a-hover-color: #ffffff;
--brand-red: #b90e1f;
--brand-green: #00ff00;
--sidebar-width: 350px;
--min-input-field-width: 50px;
--min-input-field-height: 30px;
--min-screen-width: 320px;
--standard-width: 1240px;
--sidebar-padding: 4rem;
--brand-b: #0a1718;
--brand-b-hover: #303031;
--brand-b-hover-color: #fff;
--brand-form-color: #757579;
--brand-form-placeholder-color: #c2c2c2;
--min-header-height: 85px;
--max-header-height: 85px;
--ink: #10141b;
--ink-2: #171c25;
--graphite: #262a31;
--circuit-blue: #1b76bc;
--circuit-blue-dark: #145a92;
--signal-cyan: #29abe2;
--breaker-amber: #e8a33d;
--paper: #f5f3ee;
--paper-2: #eae7de;
--line: #dad5c8;
--line-dark: #ffffff19;
--text-dark: #12151c;
--text-dark-muted: #565b63;
--text-light: #f2f3f5;
--text-light-muted: #a8aeb8;
--font-display: League Spartan, sans-serif;
--font-body: Manrope, sans-serif;
--radius: 3px;
--header-h: 84px;
--sidebar-default-width: 20%;
--sidebar-max-width: 350px;
--sidebar-min-width: 250px;
--sidebar-gap: 1.5rem;
--sidebar-min-screen-width: 800px;
}
@media screen and (max-width: 800px) {

#content:has(.sidebar-layout) {
    padding: 0;
}

.sidebar-layout {
    flex-direction: column;
}

.left-sidebar .sidebar,
.right-sidebar .sidebar {
    order: 2;
    max-width: unset;
    width: unset;
}

.left-sidebar .main-content,
.right-sidebar .main-content {
    order: 1;
    width: unset;
}

.sidebar-layout.both-sides {
    flex-direction: row;
    flex-wrap: wrap;
}

.both-sides .main-content {
    order: 1;
    width: 100%;
}

.both-sides .left-sidebar {
    order: 2;
    width: 50%;
    max-width: unset;
}

.both-sides .right-sidebar {
    order: 3;
    width: 50%;
    max-width: unset;
}
}