:root {
--base-color-text: #6B847E;
--base-color-accent: #000;
--base-color-light: #fff;
--base-color-background: #FBFAF1;
--base-link-color: var(--base-color-accent);
--base-line-color: var(--base-color-text);
--base-root-font-size: 16px;
--base-font-family: "ApercuLight", sans-serif;
--base-font-weight: normal;
--base-line-height: 1.333;
--base-font-size: clamp(14px, 1.5625vw, 30px);
--base-font-size-small: calc(0.7 * var(--base-font-size));
--base-font-size-large: clamp(16px, 2.083333333vw, 40px);
--base-headings-color: var(--base-color-text);
--base-headings-font-family: "DidotProRoman", serif;
--base-headings-font-weight: bold;
--base-headings-line-height: 1; --base-headings-font-size-1: clamp(46px, 7.291666667vw, 140px);
--base-headings-font-size-2: var(--base-headings-font-size-1);
--base-headings-font-size-3: clamp(25px 2.604166667vw, 50px);
--base-headings-font-size-4: var(--base-font-size);
--base-layout-width: 100%;
--base-content-width: 1200px;
--base-content-width-narrow: 800px;
--base-content-width-wide: calc(1920px - 2*var(--base-offset));
--base-content-width-full: 100%;
--base-space: calc(1.5*var(--base-font-size));
--base-offset: var(--base-space);
--base-offset-vertical: calc(50vh - var(--base-headings-font-size-2)/2);
--base-gap: var(--base-space);
--header-height: calc(2*var(--base-offset));
--header-offset: var(--base-offset);
--header-background: transparent;
--header-color: var(--base-color-accent);
--header-color-accent: var(--base-color-accent);
--header-animation-time: 300ms;
--header-menu-font-size: calc(0.85*var(--base-headings-font-size-2));
--header-menu-background: #6B7E7A;
--header-menu-color: var(--base-color-background);
--theme-layout-offset-wide: 0;
}
@media (min-width: 1250px) {
:root {
--theme-layout-offset-wide: calc((100vw - var(--base-content-width))/-2 + var(--base-offset));
}
}
@media (min-width: 1950px) {
:root {
--theme-layout-offset-wide: calc((1800px - var(--base-content-width))/-2 + var(--base-offset));
}
}
@media (max-width: 781px) {
:root {
--base-space: var(--base-font-size);
--base-offset-vertical: calc(4*var(--base-headings-font-size-2));
--header-height: calc(7*1.5*var(--base-offset));
--header-menu-font-size: calc(0.75*var(--base-headings-font-size-2));
}
}
@media (max-width: 399px) {
:root {
--header-menu-font-size: calc(0.7*var(--base-headings-font-size-2));
}
}