:root {
    /*Triatic Colours
        SPI Red: #A80532
        SPI Blue: #055fa8
        SPI Gold: #a89205*/
    /*Four Colours
        SPI Red: #a80532
        SPI Green: #33a805
        SPI Blue: #055fa8
        SPI Orange: #a84105*/
    --color-spi-burgundy: #A80532;
    --color-spi-dark-burgundy: #6D0019;
    --color-spi-blue: #055fA8;
    --color-spi-dark-blue: #3A000D;
    --color-spi-grey: #999999;
    /*--color-spi-light-grey: #C7C7C7;*/
    --color-spi-light-grey: #EDEDED;
    --color-spi-dark-grey: #808080;
    --color-spi-black: #333333;
    --color-spi-white: #FCFCFC;

    --color-spi-green: #33A805;
    --color-spi-dark-green: #1E6303;
    --color-spi-red: #CC0C0C;
    --color-spi-dark-red: 8C0404;
    --color-spi-gold: #A89205;
    --color-spi-dark-gold: #665903;


    /* Default Theme */
    --color-primary: var(--color-spi-burgundy);
    --color-primary-dark: var(--color-spi-dark-burgundy);
    --color-secondary: var(--color-spi-blue);
    --color-secondary-dark: var(--color-spi-dark-blue);
    --color-third:var(--color-spi-light-grey);
    --color-third-dark: var(--color-spi-dark-grey);

    --page-outside-frame-color: var(--color-spi-white);
    /*--page-outside-frame-color: var(--color-spi-light-grey);*/
    --page-canvass-color: var(--color-spi-white);
    /*--page-canvass-color: var(--color-light-grey);*/
    --page-text-color: var(--color-spi-black);
    --page-text-alternate-color: var(--color-spi-white);


    /* Christmas Theme */
    /*--color-primary: var(--color-spi-green);
    --color-primary-dark: var(--color-spi-dark-green);
    --color-secondary: var(--color-spi-red);
    --color-secondary-dark: var(--color-spi-dark-red);
    --color-third:var(--color-spi-light-grey);
    --color-third-dark: var(--color-spi-dark-grey);

    --page-outside-frame-color: var(--color-spi-white);
    --page-canvass-color: var(--color-spi-white);
    --page-text-color: var(--color-spi-black);
    --page-text-alternate-color: var(--color-spi-white);*/

     /* Green & Blue Theme */
    /*--color-primary: var(--color-spi-blue);
    --color-primary-dark: var(--color-spi-dark-blue);
    --color-secondary: var(--color-spi-green);
    --color-secondary-dark: var(--color-spi-dark-green);
    --color-third:var(--color-spi-burgundy);
    --color-third-dark: var(--color-spi-dark-burgundy);

    --page-outside-frame-color: var(--color-spi-white);
    --page-canvass-color: var(--color-spi-white);
    --page-text-color: var(--color-spi-black);
    --page-text-alternate-color: var(--color-spi-white);*/




    /* Colour Details */
    --page-primary-color: var(--color-primary);
    --page-primary-color-text: var(--color-primary);
    --page-secondary-color: var(--color-secondary);
    --page-third-color: var(--color-third);
    --table-border-color: var(--page-primary-color);
    --table-header-background-color: var(--page-primary-color);
    --table-header-text-color: var(--page-canvass-color);
    --table-divider-color: var(--table-border-color);
    /* https://cssgradientbutton.com/ */
    --menuButton-active-background-color: var(--color-primary);
    --menuButton-active-background-color-darker: var(--color-primary-dark);
    --menuButton-active-text-color: var(--page-text-alternate-color);
    --menuButton-active-border-color: var(--menuButton-active-background-color-darker);
    --menuButton-hover-background-color: var(--color-secondary);
    --menuButton-hover-background-color-darker: var(--color-secondary-dark);
    --menuButton-hover-border-color: var(--menuButton-hover-background-color-darker);
    --menuButton-hover-text-color: var(--page-text-alternate-color);
    --menuButton-disabled-background-color: var(--color-third);
    --menuButton-disabled-background-color-darker: var(--color-third-dark);
    --menuButton-disabled-text-color: var(--page-text-alternate-color);
    --menuButton-disabled-border-color: var(--menuButton-disabled-background-color-darker);
    --breadcrumb-text-color: var(--page-primary-color-text);
    --breadcrumb-background-color: var(--page-canvass-color);
    --breadcrumb-hover-color: var(--page-secondary-color);
    --itemName-text-color: var(--page-primary-color);
    --itemName-text-hover-color: var(--page-secondary-color);
    --line-divider-color: var(--page-primary-color);
    --thickness-small: 1px;
    --thickness-medium: 3px;
    --thickness-large: 5px;
    --thickness-XL: 10px;
    --max-width: 1100px;
}