:root {
--site-font: Times New Roman, Times, serif;
--heading-font: Montserrat, sans-serif;
--footer-height: 200px;
--border-color: #505050;
--brand-a-bg: #26a269;
--brand-a-hilite: #1662b3;
--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: Lato, sans-serif;
--brand-a: #d15b3d;
--brand-a-color: #ffffff;
--brand-a-hover: #a8cf45;
--brand-a-hover-color: #1662b3;
--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: 1500px;
--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: 100px;
--max-header-height: 114px;
--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;
}
}