:root {
          --bg-grey-100: rgba(54, 54, 54, 1);
          --text-grey-100: rgba(54, 54, 54, 1);
          --border-grey-100: rgba(54, 54, 54, 1);
         .button.bg-grey-100:hover { background-color: var(--bg-grey-70); }
         .button.text-grey-100:hover { color: var(--text-grey-100); }
          --bg-grey-90: rgba(54, 54, 54, 0.9);
          --text-grey-90: rgba(54, 54, 54, 0.9);
          --border-grey-90: rgba(54, 54, 54, 0.9);
          --bg-grey-80: rgba(54, 54, 54, 0.8);
          --text-grey-80: rgba(54, 54, 54, 0.8);
          --border-grey-80: rgba(54, 54, 54, 0.8);
          --bg-grey-70: rgba(54, 54, 54, 0.7);
          --text-grey-70: rgba(54, 54, 54, 0.7);
          --border-grey-70: rgba(54, 54, 54, 0.7);
          --bg-grey-60: rgba(54, 54, 54, 0.6);
          --text-grey-60: rgba(54, 54, 54, 0.6);
          --border-grey-60: rgba(54, 54, 54, 0.6);
          --bg-grey-50: rgba(54, 54, 54, 0.5);
          --text-grey-50: rgba(54, 54, 54, 0.5);
          --border-grey-50: rgba(54, 54, 54, 0.5);
          --bg-grey-40: rgba(54, 54, 54, 0.4);
          --text-grey-40: rgba(54, 54, 54, 0.4);
          --border-grey-40: rgba(54, 54, 54, 0.4);
          --bg-grey-30: rgba(54, 54, 54, 0.3);
          --text-grey-30: rgba(54, 54, 54, 0.3);
          --border-grey-30: rgba(54, 54, 54, 0.3);
          --bg-grey-20: rgba(54, 54, 54, 0.2);
          --text-grey-20: rgba(54, 54, 54, 0.2);
          --border-grey-20: rgba(54, 54, 54, 0.2);
          --bg-grey-10: rgba(54, 54, 54, 0.1);
          --text-grey-10: rgba(54, 54, 54, 0.1);
          --border-grey-10: rgba(54, 54, 54, 0.1);
          --bg-green-dark-100: rgba(76, 126, 74, 1);
          --text-green-dark-100: rgba(76, 126, 74, 1);
          --border-green-dark-100: rgba(76, 126, 74, 1);
         .button.bg-green-dark-100:hover { background-color: var(--bg-green-dark-70); }
         .button.text-green-dark-100:hover { color: var(--text-green-dark-100); }
          --bg-green-dark-90: rgba(76, 126, 74, 0.9);
          --text-green-dark-90: rgba(76, 126, 74, 0.9);
          --border-green-dark-90: rgba(76, 126, 74, 0.9);
          --bg-green-dark-80: rgba(76, 126, 74, 0.8);
          --text-green-dark-80: rgba(76, 126, 74, 0.8);
          --border-green-dark-80: rgba(76, 126, 74, 0.8);
          --bg-green-dark-70: rgba(76, 126, 74, 0.7);
          --text-green-dark-70: rgba(76, 126, 74, 0.7);
          --border-green-dark-70: rgba(76, 126, 74, 0.7);
          --bg-green-dark-60: rgba(76, 126, 74, 0.6);
          --text-green-dark-60: rgba(76, 126, 74, 0.6);
          --border-green-dark-60: rgba(76, 126, 74, 0.6);
          --bg-green-dark-50: rgba(76, 126, 74, 0.5);
          --text-green-dark-50: rgba(76, 126, 74, 0.5);
          --border-green-dark-50: rgba(76, 126, 74, 0.5);
          --bg-green-dark-40: rgba(76, 126, 74, 0.4);
          --text-green-dark-40: rgba(76, 126, 74, 0.4);
          --border-green-dark-40: rgba(76, 126, 74, 0.4);
          --bg-green-dark-30: rgba(76, 126, 74, 0.3);
          --text-green-dark-30: rgba(76, 126, 74, 0.3);
          --border-green-dark-30: rgba(76, 126, 74, 0.3);
          --bg-green-dark-20: rgba(76, 126, 74, 0.2);
          --text-green-dark-20: rgba(76, 126, 74, 0.2);
          --border-green-dark-20: rgba(76, 126, 74, 0.2);
          --bg-green-dark-10: rgba(76, 126, 74, 0.1);
          --text-green-dark-10: rgba(76, 126, 74, 0.1);
          --border-green-dark-10: rgba(76, 126, 74, 0.1);
          --bg-green-100: rgba(110, 163, 79, 1);
          --text-green-100: rgba(110, 163, 79, 1);
          --border-green-100: rgba(110, 163, 79, 1);
         .button.bg-green-100:hover { background-color: var(--bg-green-70); }
         .button.text-green-100:hover { color: var(--text-green-100); }
          --bg-green-90: rgba(110, 163, 79, 0.9);
          --text-green-90: rgba(110, 163, 79, 0.9);
          --border-green-90: rgba(110, 163, 79, 0.9);
          --bg-green-80: rgba(110, 163, 79, 0.8);
          --text-green-80: rgba(110, 163, 79, 0.8);
          --border-green-80: rgba(110, 163, 79, 0.8);
          --bg-green-70: rgba(110, 163, 79, 0.7);
          --text-green-70: rgba(110, 163, 79, 0.7);
          --border-green-70: rgba(110, 163, 79, 0.7);
          --bg-green-60: rgba(110, 163, 79, 0.6);
          --text-green-60: rgba(110, 163, 79, 0.6);
          --border-green-60: rgba(110, 163, 79, 0.6);
          --bg-green-50: rgba(110, 163, 79, 0.5);
          --text-green-50: rgba(110, 163, 79, 0.5);
          --border-green-50: rgba(110, 163, 79, 0.5);
          --bg-green-40: rgba(110, 163, 79, 0.4);
          --text-green-40: rgba(110, 163, 79, 0.4);
          --border-green-40: rgba(110, 163, 79, 0.4);
          --bg-green-30: rgba(110, 163, 79, 0.3);
          --text-green-30: rgba(110, 163, 79, 0.3);
          --border-green-30: rgba(110, 163, 79, 0.3);
          --bg-green-20: rgba(110, 163, 79, 0.2);
          --text-green-20: rgba(110, 163, 79, 0.2);
          --border-green-20: rgba(110, 163, 79, 0.2);
          --bg-green-10: rgba(110, 163, 79, 0.1);
          --text-green-10: rgba(110, 163, 79, 0.1);
          --border-green-10: rgba(110, 163, 79, 0.1);
          --bg-green-light-100: rgba(175, 202, 74, 1);
          --text-green-light-100: rgba(175, 202, 74, 1);
          --border-green-light-100: rgba(175, 202, 74, 1);
         .button.bg-green-light-100:hover { background-color: var(--bg-green-light-70); }
         .button.text-green-light-100:hover { color: var(--text-green-light-100); }
          --bg-green-light-90: rgba(175, 202, 74, 0.9);
          --text-green-light-90: rgba(175, 202, 74, 0.9);
          --border-green-light-90: rgba(175, 202, 74, 0.9);
          --bg-green-light-80: rgba(175, 202, 74, 0.8);
          --text-green-light-80: rgba(175, 202, 74, 0.8);
          --border-green-light-80: rgba(175, 202, 74, 0.8);
          --bg-green-light-70: rgba(175, 202, 74, 0.7);
          --text-green-light-70: rgba(175, 202, 74, 0.7);
          --border-green-light-70: rgba(175, 202, 74, 0.7);
          --bg-green-light-60: rgba(175, 202, 74, 0.6);
          --text-green-light-60: rgba(175, 202, 74, 0.6);
          --border-green-light-60: rgba(175, 202, 74, 0.6);
          --bg-green-light-50: rgba(175, 202, 74, 0.5);
          --text-green-light-50: rgba(175, 202, 74, 0.5);
          --border-green-light-50: rgba(175, 202, 74, 0.5);
          --bg-green-light-40: rgba(175, 202, 74, 0.4);
          --text-green-light-40: rgba(175, 202, 74, 0.4);
          --border-green-light-40: rgba(175, 202, 74, 0.4);
          --bg-green-light-30: rgba(175, 202, 74, 0.3);
          --text-green-light-30: rgba(175, 202, 74, 0.3);
          --border-green-light-30: rgba(175, 202, 74, 0.3);
          --bg-green-light-20: rgba(175, 202, 74, 0.2);
          --text-green-light-20: rgba(175, 202, 74, 0.2);
          --border-green-light-20: rgba(175, 202, 74, 0.2);
          --bg-green-light-10: rgba(175, 202, 74, 0.1);
          --text-green-light-10: rgba(175, 202, 74, 0.1);
          --border-green-light-10: rgba(175, 202, 74, 0.1);
          --bg-yellow-100: rgba(249, 224, 62, 1);
          --text-yellow-100: rgba(249, 224, 62, 1);
          --border-yellow-100: rgba(249, 224, 62, 1);
         .button.bg-yellow-100:hover { background-color: var(--bg-yellow-70); }
         .button.text-yellow-100:hover { color: var(--text-yellow-100); }
          --bg-yellow-90: rgba(249, 224, 62, 0.9);
          --text-yellow-90: rgba(249, 224, 62, 0.9);
          --border-yellow-90: rgba(249, 224, 62, 0.9);
          --bg-yellow-80: rgba(249, 224, 62, 0.8);
          --text-yellow-80: rgba(249, 224, 62, 0.8);
          --border-yellow-80: rgba(249, 224, 62, 0.8);
          --bg-yellow-70: rgba(249, 224, 62, 0.7);
          --text-yellow-70: rgba(249, 224, 62, 0.7);
          --border-yellow-70: rgba(249, 224, 62, 0.7);
          --bg-yellow-60: rgba(249, 224, 62, 0.6);
          --text-yellow-60: rgba(249, 224, 62, 0.6);
          --border-yellow-60: rgba(249, 224, 62, 0.6);
          --bg-yellow-50: rgba(249, 224, 62, 0.5);
          --text-yellow-50: rgba(249, 224, 62, 0.5);
          --border-yellow-50: rgba(249, 224, 62, 0.5);
          --bg-yellow-40: rgba(249, 224, 62, 0.4);
          --text-yellow-40: rgba(249, 224, 62, 0.4);
          --border-yellow-40: rgba(249, 224, 62, 0.4);
          --bg-yellow-30: rgba(249, 224, 62, 0.3);
          --text-yellow-30: rgba(249, 224, 62, 0.3);
          --border-yellow-30: rgba(249, 224, 62, 0.3);
          --bg-yellow-20: rgba(249, 224, 62, 0.2);
          --text-yellow-20: rgba(249, 224, 62, 0.2);
          --border-yellow-20: rgba(249, 224, 62, 0.2);
          --bg-yellow-10: rgba(249, 224, 62, 0.1);
          --text-yellow-10: rgba(249, 224, 62, 0.1);
          --border-yellow-10: rgba(249, 224, 62, 0.1);
          --bg-orange-100: rgba(244, 158, 65, 1);
          --text-orange-100: rgba(244, 158, 65, 1);
          --border-orange-100: rgba(244, 158, 65, 1);
         .button.bg-orange-100:hover { background-color: var(--bg-orange-70); }
         .button.text-orange-100:hover { color: var(--text-orange-100); }
          --bg-orange-90: rgba(244, 158, 65, 0.9);
          --text-orange-90: rgba(244, 158, 65, 0.9);
          --border-orange-90: rgba(244, 158, 65, 0.9);
          --bg-orange-80: rgba(244, 158, 65, 0.8);
          --text-orange-80: rgba(244, 158, 65, 0.8);
          --border-orange-80: rgba(244, 158, 65, 0.8);
          --bg-orange-70: rgba(244, 158, 65, 0.7);
          --text-orange-70: rgba(244, 158, 65, 0.7);
          --border-orange-70: rgba(244, 158, 65, 0.7);
          --bg-orange-60: rgba(244, 158, 65, 0.6);
          --text-orange-60: rgba(244, 158, 65, 0.6);
          --border-orange-60: rgba(244, 158, 65, 0.6);
          --bg-orange-50: rgba(244, 158, 65, 0.5);
          --text-orange-50: rgba(244, 158, 65, 0.5);
          --border-orange-50: rgba(244, 158, 65, 0.5);
          --bg-orange-40: rgba(244, 158, 65, 0.4);
          --text-orange-40: rgba(244, 158, 65, 0.4);
          --border-orange-40: rgba(244, 158, 65, 0.4);
          --bg-orange-30: rgba(244, 158, 65, 0.3);
          --text-orange-30: rgba(244, 158, 65, 0.3);
          --border-orange-30: rgba(244, 158, 65, 0.3);
          --bg-orange-20: rgba(244, 158, 65, 0.2);
          --text-orange-20: rgba(244, 158, 65, 0.2);
          --border-orange-20: rgba(244, 158, 65, 0.2);
          --bg-orange-10: rgba(244, 158, 65, 0.1);
          --text-orange-10: rgba(244, 158, 65, 0.1);
          --border-orange-10: rgba(244, 158, 65, 0.1);
          --bg-red-100: rgba(234, 95, 65, 1);
          --text-red-100: rgba(234, 95, 65, 1);
          --border-red-100: rgba(234, 95, 65, 1);
         .button.bg-red-100:hover { background-color: var(--bg-red-70); }
         .button.text-red-100:hover { color: var(--text-red-100); }
          --bg-red-90: rgba(234, 95, 65, 0.9);
          --text-red-90: rgba(234, 95, 65, 0.9);
          --border-red-90: rgba(234, 95, 65, 0.9);
          --bg-red-80: rgba(234, 95, 65, 0.8);
          --text-red-80: rgba(234, 95, 65, 0.8);
          --border-red-80: rgba(234, 95, 65, 0.8);
          --bg-red-70: rgba(234, 95, 65, 0.7);
          --text-red-70: rgba(234, 95, 65, 0.7);
          --border-red-70: rgba(234, 95, 65, 0.7);
          --bg-red-60: rgba(234, 95, 65, 0.6);
          --text-red-60: rgba(234, 95, 65, 0.6);
          --border-red-60: rgba(234, 95, 65, 0.6);
          --bg-red-50: rgba(234, 95, 65, 0.5);
          --text-red-50: rgba(234, 95, 65, 0.5);
          --border-red-50: rgba(234, 95, 65, 0.5);
          --bg-red-40: rgba(234, 95, 65, 0.4);
          --text-red-40: rgba(234, 95, 65, 0.4);
          --border-red-40: rgba(234, 95, 65, 0.4);
          --bg-red-30: rgba(234, 95, 65, 0.3);
          --text-red-30: rgba(234, 95, 65, 0.3);
          --border-red-30: rgba(234, 95, 65, 0.3);
          --bg-red-20: rgba(234, 95, 65, 0.2);
          --text-red-20: rgba(234, 95, 65, 0.2);
          --border-red-20: rgba(234, 95, 65, 0.2);
          --bg-red-10: rgba(234, 95, 65, 0.1);
          --text-red-10: rgba(234, 95, 65, 0.1);
          --border-red-10: rgba(234, 95, 65, 0.1);
}

        /* grey Colour selection */
         .bg-grey-100 { background-color: var(--bg-grey-100); }
         .text-grey-100 { color: var(--text-grey-100); }
         .border-grey-100 { border-color: var(--border-grey-100); }
         .text-grey-100 h1,
         .text-grey-100 h2,
         .text-grey-100 h3,
         .text-grey-100 p,
         .text-grey-100 a {
         color: var(--text-grey-100)!important;
         }
         .bg-grey-90 { background-color: var(--bg-grey-90); }
         .text-grey-90 { color: var(--text-grey-90); }
         .border-grey-90 { border-color: var(--border-grey-90); }
         .bg-grey-80 { background-color: var(--bg-grey-80); }
         .text-grey-80 { color: var(--text-grey-80); }
         .border-grey-80 { border-color: var(--border-grey-80); }
         .bg-grey-70 { background-color: var(--bg-grey-70); }
         .text-grey-70 { color: var(--text-grey-70); }
         .border-grey-70 { border-color: var(--border-grey-70); }
         .bg-grey-60 { background-color: var(--bg-grey-60); }
         .text-grey-60 { color: var(--text-grey-60); }
         .border-grey-60 { border-color: var(--border-grey-60); }
         .bg-grey-50 { background-color: var(--bg-grey-50); }
         .text-grey-50 { color: var(--text-grey-50); }
         .border-grey-50 { border-color: var(--border-grey-50); }
         .bg-grey-40 { background-color: var(--bg-grey-40); }
         .text-grey-40 { color: var(--text-grey-40); }
         .border-grey-40 { border-color: var(--border-grey-40); }
         .bg-grey-30 { background-color: var(--bg-grey-30); }
         .text-grey-30 { color: var(--text-grey-30); }
         .border-grey-30 { border-color: var(--border-grey-30); }
         .bg-grey-20 { background-color: var(--bg-grey-20); }
         .text-grey-20 { color: var(--text-grey-20); }
         .border-grey-20 { border-color: var(--border-grey-20); }
         .bg-grey-10 { background-color: var(--bg-grey-10); }
         .text-grey-10 { color: var(--text-grey-10); }
         .border-grey-10 { border-color: var(--border-grey-10); }
        /* green-dark Colour selection */
         .bg-green-dark-100 { background-color: var(--bg-green-dark-100); }
         .text-green-dark-100 { color: var(--text-green-dark-100); }
         .border-green-dark-100 { border-color: var(--border-green-dark-100); }
         .text-green-dark-100 h1,
         .text-green-dark-100 h2,
         .text-green-dark-100 h3,
         .text-green-dark-100 p,
         .text-green-dark-100 a {
         color: var(--text-green-dark-100)!important;
         }
         .bg-green-dark-90 { background-color: var(--bg-green-dark-90); }
         .text-green-dark-90 { color: var(--text-green-dark-90); }
         .border-green-dark-90 { border-color: var(--border-green-dark-90); }
         .bg-green-dark-80 { background-color: var(--bg-green-dark-80); }
         .text-green-dark-80 { color: var(--text-green-dark-80); }
         .border-green-dark-80 { border-color: var(--border-green-dark-80); }
         .bg-green-dark-70 { background-color: var(--bg-green-dark-70); }
         .text-green-dark-70 { color: var(--text-green-dark-70); }
         .border-green-dark-70 { border-color: var(--border-green-dark-70); }
         .bg-green-dark-60 { background-color: var(--bg-green-dark-60); }
         .text-green-dark-60 { color: var(--text-green-dark-60); }
         .border-green-dark-60 { border-color: var(--border-green-dark-60); }
         .bg-green-dark-50 { background-color: var(--bg-green-dark-50); }
         .text-green-dark-50 { color: var(--text-green-dark-50); }
         .border-green-dark-50 { border-color: var(--border-green-dark-50); }
         .bg-green-dark-40 { background-color: var(--bg-green-dark-40); }
         .text-green-dark-40 { color: var(--text-green-dark-40); }
         .border-green-dark-40 { border-color: var(--border-green-dark-40); }
         .bg-green-dark-30 { background-color: var(--bg-green-dark-30); }
         .text-green-dark-30 { color: var(--text-green-dark-30); }
         .border-green-dark-30 { border-color: var(--border-green-dark-30); }
         .bg-green-dark-20 { background-color: var(--bg-green-dark-20); }
         .text-green-dark-20 { color: var(--text-green-dark-20); }
         .border-green-dark-20 { border-color: var(--border-green-dark-20); }
         .bg-green-dark-10 { background-color: var(--bg-green-dark-10); }
         .text-green-dark-10 { color: var(--text-green-dark-10); }
         .border-green-dark-10 { border-color: var(--border-green-dark-10); }
        /* green Colour selection */
         .bg-green-100 { background-color: var(--bg-green-100); }
         .text-green-100 { color: var(--text-green-100); }
         .border-green-100 { border-color: var(--border-green-100); }
         .text-green-100 h1,
         .text-green-100 h2,
         .text-green-100 h3,
         .text-green-100 p,
         .text-green-100 a {
         color: var(--text-green-100)!important;
         }
         .bg-green-90 { background-color: var(--bg-green-90); }
         .text-green-90 { color: var(--text-green-90); }
         .border-green-90 { border-color: var(--border-green-90); }
         .bg-green-80 { background-color: var(--bg-green-80); }
         .text-green-80 { color: var(--text-green-80); }
         .border-green-80 { border-color: var(--border-green-80); }
         .bg-green-70 { background-color: var(--bg-green-70); }
         .text-green-70 { color: var(--text-green-70); }
         .border-green-70 { border-color: var(--border-green-70); }
         .bg-green-60 { background-color: var(--bg-green-60); }
         .text-green-60 { color: var(--text-green-60); }
         .border-green-60 { border-color: var(--border-green-60); }
         .bg-green-50 { background-color: var(--bg-green-50); }
         .text-green-50 { color: var(--text-green-50); }
         .border-green-50 { border-color: var(--border-green-50); }
         .bg-green-40 { background-color: var(--bg-green-40); }
         .text-green-40 { color: var(--text-green-40); }
         .border-green-40 { border-color: var(--border-green-40); }
         .bg-green-30 { background-color: var(--bg-green-30); }
         .text-green-30 { color: var(--text-green-30); }
         .border-green-30 { border-color: var(--border-green-30); }
         .bg-green-20 { background-color: var(--bg-green-20); }
         .text-green-20 { color: var(--text-green-20); }
         .border-green-20 { border-color: var(--border-green-20); }
         .bg-green-10 { background-color: var(--bg-green-10); }
         .text-green-10 { color: var(--text-green-10); }
         .border-green-10 { border-color: var(--border-green-10); }
        /* green-light Colour selection */
         .bg-green-light-100 { background-color: var(--bg-green-light-100); }
         .text-green-light-100 { color: var(--text-green-light-100); }
         .border-green-light-100 { border-color: var(--border-green-light-100); }
         .text-green-light-100 h1,
         .text-green-light-100 h2,
         .text-green-light-100 h3,
         .text-green-light-100 p,
         .text-green-light-100 a {
         color: var(--text-green-light-100)!important;
         }
         .bg-green-light-90 { background-color: var(--bg-green-light-90); }
         .text-green-light-90 { color: var(--text-green-light-90); }
         .border-green-light-90 { border-color: var(--border-green-light-90); }
         .bg-green-light-80 { background-color: var(--bg-green-light-80); }
         .text-green-light-80 { color: var(--text-green-light-80); }
         .border-green-light-80 { border-color: var(--border-green-light-80); }
         .bg-green-light-70 { background-color: var(--bg-green-light-70); }
         .text-green-light-70 { color: var(--text-green-light-70); }
         .border-green-light-70 { border-color: var(--border-green-light-70); }
         .bg-green-light-60 { background-color: var(--bg-green-light-60); }
         .text-green-light-60 { color: var(--text-green-light-60); }
         .border-green-light-60 { border-color: var(--border-green-light-60); }
         .bg-green-light-50 { background-color: var(--bg-green-light-50); }
         .text-green-light-50 { color: var(--text-green-light-50); }
         .border-green-light-50 { border-color: var(--border-green-light-50); }
         .bg-green-light-40 { background-color: var(--bg-green-light-40); }
         .text-green-light-40 { color: var(--text-green-light-40); }
         .border-green-light-40 { border-color: var(--border-green-light-40); }
         .bg-green-light-30 { background-color: var(--bg-green-light-30); }
         .text-green-light-30 { color: var(--text-green-light-30); }
         .border-green-light-30 { border-color: var(--border-green-light-30); }
         .bg-green-light-20 { background-color: var(--bg-green-light-20); }
         .text-green-light-20 { color: var(--text-green-light-20); }
         .border-green-light-20 { border-color: var(--border-green-light-20); }
         .bg-green-light-10 { background-color: var(--bg-green-light-10); }
         .text-green-light-10 { color: var(--text-green-light-10); }
         .border-green-light-10 { border-color: var(--border-green-light-10); }
        /* yellow Colour selection */
         .bg-yellow-100 { background-color: var(--bg-yellow-100); }
         .text-yellow-100 { color: var(--text-yellow-100); }
         .border-yellow-100 { border-color: var(--border-yellow-100); }
         .text-yellow-100 h1,
         .text-yellow-100 h2,
         .text-yellow-100 h3,
         .text-yellow-100 p,
         .text-yellow-100 a {
         color: var(--text-yellow-100)!important;
         }
         .bg-yellow-90 { background-color: var(--bg-yellow-90); }
         .text-yellow-90 { color: var(--text-yellow-90); }
         .border-yellow-90 { border-color: var(--border-yellow-90); }
         .bg-yellow-80 { background-color: var(--bg-yellow-80); }
         .text-yellow-80 { color: var(--text-yellow-80); }
         .border-yellow-80 { border-color: var(--border-yellow-80); }
         .bg-yellow-70 { background-color: var(--bg-yellow-70); }
         .text-yellow-70 { color: var(--text-yellow-70); }
         .border-yellow-70 { border-color: var(--border-yellow-70); }
         .bg-yellow-60 { background-color: var(--bg-yellow-60); }
         .text-yellow-60 { color: var(--text-yellow-60); }
         .border-yellow-60 { border-color: var(--border-yellow-60); }
         .bg-yellow-50 { background-color: var(--bg-yellow-50); }
         .text-yellow-50 { color: var(--text-yellow-50); }
         .border-yellow-50 { border-color: var(--border-yellow-50); }
         .bg-yellow-40 { background-color: var(--bg-yellow-40); }
         .text-yellow-40 { color: var(--text-yellow-40); }
         .border-yellow-40 { border-color: var(--border-yellow-40); }
         .bg-yellow-30 { background-color: var(--bg-yellow-30); }
         .text-yellow-30 { color: var(--text-yellow-30); }
         .border-yellow-30 { border-color: var(--border-yellow-30); }
         .bg-yellow-20 { background-color: var(--bg-yellow-20); }
         .text-yellow-20 { color: var(--text-yellow-20); }
         .border-yellow-20 { border-color: var(--border-yellow-20); }
         .bg-yellow-10 { background-color: var(--bg-yellow-10); }
         .text-yellow-10 { color: var(--text-yellow-10); }
         .border-yellow-10 { border-color: var(--border-yellow-10); }
        /* orange Colour selection */
         .bg-orange-100 { background-color: var(--bg-orange-100); }
         .text-orange-100 { color: var(--text-orange-100); }
         .border-orange-100 { border-color: var(--border-orange-100); }
         .text-orange-100 h1,
         .text-orange-100 h2,
         .text-orange-100 h3,
         .text-orange-100 p,
         .text-orange-100 a {
         color: var(--text-orange-100)!important;
         }
         .bg-orange-90 { background-color: var(--bg-orange-90); }
         .text-orange-90 { color: var(--text-orange-90); }
         .border-orange-90 { border-color: var(--border-orange-90); }
         .bg-orange-80 { background-color: var(--bg-orange-80); }
         .text-orange-80 { color: var(--text-orange-80); }
         .border-orange-80 { border-color: var(--border-orange-80); }
         .bg-orange-70 { background-color: var(--bg-orange-70); }
         .text-orange-70 { color: var(--text-orange-70); }
         .border-orange-70 { border-color: var(--border-orange-70); }
         .bg-orange-60 { background-color: var(--bg-orange-60); }
         .text-orange-60 { color: var(--text-orange-60); }
         .border-orange-60 { border-color: var(--border-orange-60); }
         .bg-orange-50 { background-color: var(--bg-orange-50); }
         .text-orange-50 { color: var(--text-orange-50); }
         .border-orange-50 { border-color: var(--border-orange-50); }
         .bg-orange-40 { background-color: var(--bg-orange-40); }
         .text-orange-40 { color: var(--text-orange-40); }
         .border-orange-40 { border-color: var(--border-orange-40); }
         .bg-orange-30 { background-color: var(--bg-orange-30); }
         .text-orange-30 { color: var(--text-orange-30); }
         .border-orange-30 { border-color: var(--border-orange-30); }
         .bg-orange-20 { background-color: var(--bg-orange-20); }
         .text-orange-20 { color: var(--text-orange-20); }
         .border-orange-20 { border-color: var(--border-orange-20); }
         .bg-orange-10 { background-color: var(--bg-orange-10); }
         .text-orange-10 { color: var(--text-orange-10); }
         .border-orange-10 { border-color: var(--border-orange-10); }
        /* red Colour selection */
         .bg-red-100 { background-color: var(--bg-red-100); }
         .text-red-100 { color: var(--text-red-100); }
         .border-red-100 { border-color: var(--border-red-100); }
         .text-red-100 h1,
         .text-red-100 h2,
         .text-red-100 h3,
         .text-red-100 p,
         .text-red-100 a {
         color: var(--text-red-100)!important;
         }
         .bg-red-90 { background-color: var(--bg-red-90); }
         .text-red-90 { color: var(--text-red-90); }
         .border-red-90 { border-color: var(--border-red-90); }
         .bg-red-80 { background-color: var(--bg-red-80); }
         .text-red-80 { color: var(--text-red-80); }
         .border-red-80 { border-color: var(--border-red-80); }
         .bg-red-70 { background-color: var(--bg-red-70); }
         .text-red-70 { color: var(--text-red-70); }
         .border-red-70 { border-color: var(--border-red-70); }
         .bg-red-60 { background-color: var(--bg-red-60); }
         .text-red-60 { color: var(--text-red-60); }
         .border-red-60 { border-color: var(--border-red-60); }
         .bg-red-50 { background-color: var(--bg-red-50); }
         .text-red-50 { color: var(--text-red-50); }
         .border-red-50 { border-color: var(--border-red-50); }
         .bg-red-40 { background-color: var(--bg-red-40); }
         .text-red-40 { color: var(--text-red-40); }
         .border-red-40 { border-color: var(--border-red-40); }
         .bg-red-30 { background-color: var(--bg-red-30); }
         .text-red-30 { color: var(--text-red-30); }
         .border-red-30 { border-color: var(--border-red-30); }
         .bg-red-20 { background-color: var(--bg-red-20); }
         .text-red-20 { color: var(--text-red-20); }
         .border-red-20 { border-color: var(--border-red-20); }
         .bg-red-10 { background-color: var(--bg-red-10); }
         .text-red-10 { color: var(--text-red-10); }
         .border-red-10 { border-color: var(--border-red-10); }