:root {
    /*GRAYS*/
    --Gray-100: #FDFDFD;
    --Gray-200: #F5F5F5;
    --Gray-300: #D5D7DA;
    --Gray-400: #A4A7AE;
    --Gray-500: #717680;
    --Gray-600: #535862;
    --Gray-700: #414651;
    --Gray-800: #181D27;
    --Gray-900: #06080A;

    /*PINK*/
    --Pink-100: #F4CFD3;
    --Pink-200: #E99FA8;
    --Pink-300: #E38792;
    --Pink-400: #C06F78;
    --Pink-500: #7B3E45;

    /*GREEN*/
    --Green-100: #D8DEC6;
    --Green-200: #B0BA93;
    --Green-300: #7E8A5A;
    --Green-400: #5E6744;
    --Green-500: #2F3422;

    /*BLUR*/
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(20px);

    /* SHADOW */
    --shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(10, 13, 18, 0.10), 0 1px 2px 0 rgba(10, 13, 18, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(10, 13, 18, 0.10), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
    --shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03);
    --shadow-xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03);
    --shadow-2xl: 0 24px 48px -12px rgba(10, 13, 18, 0.18);
    --shadow-3xl: 0 32px 64px -12px rgba(10, 13, 18, 0.14);

}

html, body {
    margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}