body {
    background-color: #f5f5f5;
}

:root {
    /* Base Colors */

    --white-color: white;
    --black-color: #252525;

    --primary-color: #014d24;
    --primary-text-color: #000;
    --primary-hover-color: #014d24cc;
    --primary-active-color: #014d24cc;
    --primary-focus-color: #014d24cc;

    --secondary-color: #daf0e9;
    --secondary-hover-color: var(--secondary-color);
    --secondary-active-color: var(--secondary-color);
    --secondary-focus-color: var(--secondary-color);

    --tag-color: #117dd5;
    --tag-text-color: #000;

    --bg-header: #d4eee5;
    --bg-header-text-color: #000;
    --bg-footer: #d4eee5;
    --bg-footer-text-color: #000;

    /* Text Colors */

    --text-color: #212529FF; /* default bootstrap text color */

    /* Of Green and Grey */

    --green-50-color: #F0FDF4;
    --green-100-color: #DCFCE7;
    --green-200-color: #BBF7D0;
    --green-300-color: #86EFAC;
    --green-400-color: #4ADE80;
    --green-500-color: #22C55E;
    --green-600-color: #16A34A;
    --green-700-color: #15803D;
    --green-800-color: #166534;
    --green-900-color: #14532D;

    --gray-50-color: #F9FAFB;
    --gray-100-color: #F3F4F6;
    --gray-200-color: #E5E7EB;
    --gray-300-color: #D1D5DB;
    --gray-400-color: #9CA3AF;
    --gray-500-color: #6B7280;
    --gray-600-color: #4B5563;
    --gray-700-color: #374151;
    --gray-800-color: #1F2937;
    --gray-900-color: #111827;

    /* Font Size */

    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 3.75rem; /* 60px */
    --text-7xl: 4.5rem; /* 72px */
    --text-8xl: 6rem; /* 96px */
    --text-9xl: 8rem; /* 128px */
}