:root {
--base-color-text: rgb(110, 95, 75); --base-color-accent: rgb(0, 55, 165); --base-color-light: #000000;
--base-color-background: #fff;
--base-font-family: "Montserrat", verdana, sans-serif;
--base-font-weight: normal;
--base-line-height: 1.714285714;
--base-letter-spacing: 0.015em;
--base-font-size: 24px;
--base-font-size-small: 20px;
--base-font-size-medium: var(--base-headings-font-size-1);
--base-headings-color: var(--base-color-accent);
--base-headings-font-family: var(--base-font-family);
--base-headings-font-weight: 500;
--base-headings-line-height: 1.5;
--base-headings-letter-spacing: 0.045em;
--base-headings-font-size-1: 36px;
--base-headings-font-size-2: var(--base-headings-font-size-1);
--base-headings-font-size-3: var(--base-font-size);
--base-headings-font-size-4: var(--base-headings-font-size-1);
--base-layout-width: 1350px;
--base-content-width: 1010px;
--base-max-width: 1520px;
--base-offset: 23px;
--base-offset-vertical: 100px;
--base-space: 40px;
--base-gap: var(--base-offset);
}
@media (max-width: 1349px) {
:root {
--base-content-width: calc(100% - 250px);
}
}
@media (max-width: 1199px) {}
@media (max-width: 999px) {
:root {
--base-font-size: 20px;
--base-font-size-small: 16px;
--base-headings-font-size-1: 30px;
}
}
@media (max-width: 781px) {
:root {
--base-content-width: 100%;
--base-font-size: 18px;
--base-font-size-small: 14px;
--base-headings-font-size-1: 26px;
--base-line-height: 1.842105263;
--base-headings-line-height: 1.516666667;
--base-space: 30px;
--base-offset-vertical: 70px;
}
}
@media (max-width: 599px) {
:root {
--base-font-size: 17px;
--base-font-size-small: 13px;
--base-space: 25px;
}
}