:root {
	--color-white: #ffffff;
	--color-black: #000000;
	--color-gray: #707070;
	--color-gray--bright: #F8F2F4;
	--color-purple: #A70E45;
	--color-purple--bright: #DD0050;
	--color-pink: #DD0050;
	--color-pink--bright: #ff2575;
	--color-lightpink: #F4A4C1;
	--color-lightpink--bright: #F2DBE3;
	--color-gold: #FFD800;

	--color-gradient-dark: radial-gradient(#980A36, #430645);
	--color-gradient-light: radial-gradient(#DD0050, #980A36);

	--font-size-heading--big: 7rem;
	--font-lineheight-heading--big: 8.6rem;
	--font-size-heading--small: 3.4rem;
	--font-lineheight-heading--small: 4.2rem;
	--font-size-text--big: max(2.5rem, 18px);
	--font-lineheight-text--big: max(3rem, 22px);
	--font-size-text--small: max(1.6rem, 14px);
	--font-lineheight-text--small: max(2rem, 17px);

	--font-weight--light: 300;
	--font-weight--medium: 500;
	--font-weight--bold: 600;

	--font-rem: 6px;
	
	--side-spacing: 15px;
	--side-spacing--neg: -15px;


	--logo-height--mobile-portrait: 30px;
	--logo-height--mobile-landscape: 24px;
	--logo-height--tablet: 72px;
	--logo-height--desktop: 72px;

	--header-height--mobile: 60px;
	--header-height--tablet: 110px;
	--header-height--desktop: 110px;

	--logo-offset--mobile: 0px;
	--logo-offset--tablet: 0px;
	--logo-offset--desktop: 0px;

	--cta-offset: 22px;

	--header-height: var(--header-height--mobile);
	--logo-offset: var(--logo-offset--mobile);

	--mobile-buttons-size: 44px;
	--mobile-buttons-spacing: 12px;

	--scrollbar-width: clamp(0px, calc(1700vw - 16864px), 17px);/*set in js later*/
}

@media all and (orientation: portrait) {
	:root {
		--logo-height: var(--logo-height--mobile-portrait);
	}
}

@media all and (orientation: landscape) {
	:root {
		--logo-height: var(--logo-height--mobile-landscape);
	}
}

@media all and (min-width: 992px) {
	:root {
		--side-spacing: 20px;
		--side-spacing--neg: -20px;
		--font-rem: 8px;
		--header-height: var(--header-height--tablet);
		--logo-height: var(--logo-height--tablet);
		--logo-offset: var(--logo-offset--tablet);
	}
}

@media all and (min-width: 1300px) {
	:root {
		--font-rem: 10px;
		--header-height: var(--header-height--desktop);
		--logo-height: var(--logo-height--desktop);
		--logo-offset: var(--logo-offset--desktop);
	}
}

:root {
	--btn-background: var(--color-pink);
	--btn-background--hover: var(--color-pink--bright);

	--btn-color: var(--color-white);
	--btn-color--hover: var(--color-white);

	--bg-main: var(--color-white);
	--color-main: var(--color-black);

	--color-link: var(--color-purple);
	--color-link--active: var(--color-purple--bright);

	--color-accent: var(--color-pink);
	--color-accent--active: var(--color-pink--bright);
	--color-accent--inactive: var(--color-lightpink);

	--color-ongradient: var(--color-white);

	--logo-spacing--top: calc( ( var(--header-height) - var(--logo-height)  + var(--logo-offset) ) / 2);
	--logo-spacing--bottom: calc( ( var(--header-height) - var(--logo-height)  - var(--logo-offset) ) / 2);
}

#wpadminbar {
	overflow-y: hidden;
}