:root {
--base-scale: 0.04vw;
--base-color-text: #5f6967;
--base-color-accent: #61478b;
--base-color-light: #fff;
--base-color-background: #eaebe4;
--base-color-background-light: #f5f6f2;
--base-color-headlines: #3b3348;
--base-color-border: #c7c8c2;
--base-font-family: "Coupler", serif;
--base-line-height: 1.33;
--base-line-height-headings: 1.2;
--base-font-size: clamp(21px, calc(45*var(--base-scale)), 45px);
--base-font-size-small: clamp(16px, calc(30*var(--base-scale)), 30px);
--base-font-size-verysmall: clamp(12px, calc(26*var(--base-scale)), 26px);
--base-font-size-large: clamp(33px, calc(75*var(--base-scale)), 75px);
--base-space: calc(1.25*var(--base-font-size));
--base-offset: var(--base-font-size);
--base-offset-vertical: calc(2.25*var(--base-font-size-large));
--base-content-width: clamp(900px, calc(1700*var(--base-scale)), 1700px);
--base-content-width-wide: clamp(1100px, calc(1400*var(--base-scale)), 1400px);
--base-layout-width: 100%;
--header-height: clamp(190px, calc(390*var(--base-scale)), 390px);
--header-offset: var(--base-offset);
--header-background: var(--base-color-light);
--header-color: var(--base-color-text);
--header-color-accent: var(--base-color-accent);
--header-color-menu-border: #aab2b4;
--header-color-border: #71716f;
--header-animation-time: 250ms;
}
@media (max-width: 1199px) and (min-width: 600px) {
:root {
--base-scale: 0.055vw;
--base-font-size-small: clamp(18px, calc(30*var(--base-scale)), 30px);
--base-font-size-verysmall: clamp(14px, calc(26*var(--base-scale)), 26px);
}
body main,
body footer {
--base-offset: 50px;
}
}
@media (max-width: 349px) {
:root {
--base-font-size: 16px;
--base-font-size-small: 11px;
--base-font-size-verysmall: 7px;
--base-font-size-large: 28px;
}
}
body:not(.is-header-active-modalmenu).is-scrolled {
--header-height: clamp(calc(190px/2.35), calc(390/2500/4.7*100vw), calc(390px/4.7));
}