:root {
    --color-primary: #213CFD;
    --color-secondary: #FFB3C0;
    --colorBlack: #111111;
    --color-white: #fff;
	--color-gray-100: #f8f8f8;
	--color-gray-200: #dedede;
	--color-gray-500: #aaaaaa;
	--color-gray-700: #666666;
    --color-link-hover: var(--color-primary);

    --container-width: 95%;
    --spacing-x: max(24px, min(calc(0.1063829787*(100vw - 37.5em) + 24px), 144px));
    --spacing-y: max(97.7777777778px, min(calc(0.1083530339*(100vw - 37.5em) + 97.7777777778px), 220px));
    --spacing-y-xxs: calc(var(--spacing-y)* 0.25);
    --spacing-x-xxs: calc(var(--spacing-x)* 0.25);

    --font-size-h1: 2.4vw;
    --font-size-h2: 1.6vw;
    --font-size-h3: 1.3vw;
    --font-size-h4: max(16px, min(calc(0.0124113475*(100vw - 37.5em) + 16px), 20px));
    --font-size: max(12px, min(calc(0.0033191489 * (100vw - 37.5em) + 12px), 19px));
    --font-size-small: max(8px, min(calc(0.0033191489 * (100vw - 37.5em) + 8px), 10px));

    --border-width: max(2px, min(calc(0.0008865248*(100vw - 37.5em) + 2px), 3px));

    --burger-bar-width: max(24px, min(calc(0.025*(100vw - 46.5em) + 24px), 30px));
    --burger-bar-height: 2px;
    --burger-bar-spacing: calc(var(--burger-bar-width) / 3);
    --burger-bar-color: var(--color-text);
    --burger-bar-color-open: var(--color-primary-400);
    --burger-width: var(--burger-bar-width);
    --burger-delay: 300ms;
    --burger-background: transparent;
    --burger-bar-color: var(--colorBlack);
    --burger-bar-color-open: var(--colorBasis1);

    --burger-height: calc(var(--burger-width) -(var(--burger-bar-height)* 3));
   
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
    --animate-fast: 0.4s var(--easing);
    --animate: 0.8s var(--easing);
    --animate-slow: 1.2s var(--easing);
    --animate-very-slow: 3s var(--easing);

    --ratio: 25.18%;
  }


@media screen and (max-width: 811px) {
	:root {
		--container-width: 100%;
	}
}