@property --_w {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vw; 
  }
  @property --_h {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vh; 
  }

:root {
    --w: tan(atan2(var(--_w),1px)); /* screen width */
    --h: tan(atan2(var(--_h),1px)); /* screen height*/

    --desktop-size: 1920;
    --origin-ratio: var(--w) / var(--desktop-size);
    --ratio: max(var(--origin-ratio), 0.7);

    --font-family: 'Poppins', sans-serif;
    --Bg-50: #0D2946;
    --Bg-100: #0E2134;
    --Bg-80: #17293C;
    --Grey-20: #FAFAFC;
    --Grey-100: #D9D9DB;
    --Grey-200: #C0C0C2;
    --Grey-300: #A7A7A8;
    --Blue-100: #008CC3;
    --color-grey-20: #FAFAFC;
    --PrimaryColor-Blue1: #38BFF4;

    --space-inline-8px: calc(var(--ratio) * 12px);
    --space-inset-24px: calc(var(--ratio) * 24px);
    --space-inset-32px: calc(var(--ratio) * 32px);
    --Label-Large-Line-Heigh: calc(var(--ratio) * 20px);
    --Label-Large-Tracking: calc(var(--ratio) * 0.1px);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}