:root {
--base-color-text: #1b1b1b;
--base-color-accent: #c67f3f; --base-color-accent-light: #faf1eb;
--base-color-light: #afafaf;
--base-color-background: #fff;
--base-font-family: "Montserrat", sans-serif;
--base-font-weight: 300;
--base-line-height: 1.6;
--base-font-size: 18px;
--base-font-size-small: 0.8em;
--base-font-size-medium: 1.25em;
--base-headings-font-family: var(--base-font-family);
--base-headings-font-weight: 600;
--base-headings-line-height: 1.25;
--base-headings-font-size-1: 32px;
--base-headings-font-size-2: 32px;
--base-headings-font-size-3: 22px;
--base-headings-font-size-4: 22px;
--base-layout-width: 1200px;
--base-content-width: 900px;
--base-offset: 40px;
--base-offset-vertical: 80px;
--base-space: 20px;
--site-layout-columns-gap: calc(var(--base-space) * 2);
--header-height: 100px;
--header-offset: var(--base-offset);
--header-background: var(--base-color-background);
--header-color: var(--base-color-text);
--header-color-accent: var(--base-color-accent);
}
@media (max-width: 599px) {
:root {
--base-offset: 20px;
--base-offset-vertical: 50px;
--base-font-size: 16px;
--base-headings-font-size-1: 28px;
--base-headings-font-size-2: 28px;
--base-headings-font-size-3: 20px;
--base-headings-font-size-4: 20px;
--header-height: 80px;
}
}
@media (max-width: 399px) {
:root {
--base-headings-font-size-1: 24px;
--base-headings-font-size-2: 24px;
--base-headings-font-size-3: 20px;
--base-headings-font-size-4: 20px;
--header-height: 70px;
}
}