:root {
    --colorBasis1: #66B278;
    --colorBasis2: #5E73CC;
    --colorBlack: #111111;
    --colorGray: #F9F9F9;
    --colorDarkerGray: #a7a7a7;
    --color-link-hover: var(--colorBasis1);

    --container-width: 90%;
    --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: max(20px, min(calc(0.0283687943*(100vw - 37.5em) + 20px), 50px));
    --font-size-h2: max(20px, min(calc(0.024822695*(100vw - 37.5em) + 20px), 48px));
    --font-size-h3: max(16px, min(calc(0.0212765957*(100vw - 37.5em) + 16px), 34px));
    --font-size-h4: max(16px, min(calc(0.0124113475*(100vw - 37.5em) + 16px), 28px));
    --font-size-h5: max(14px, min(calc(0.0124113475*(100vw - 37.5em) + 14px), 24px));
    --font-size: max(14px, min(calc(0.0053191489*(100vw - 37.5em) + 14px), 21px));
    --font-size-small: max(14px, min(calc(0.0053191489*(100vw - 37.5em) + 14px), 20px));

    --color-background-neutral: #fff;

    --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%;
  }