: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-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;
    --color-spi-pumpkin: #FF7518;
    --color-spi-pumpkin-dark: #A24C12;


         /* Halloween Theme */
    --color-primary: var(--color-spi-pumpkin);
    --color-primary-dark: var(--color-spi-pumpkin-dark);
    /*--color-secondary: var(--color-spi-burgundy);
    --color-secondary-dark: var(--color-spi-dark-burgundy);*/
    --color-secondary: var(--color-spi-black);
    --color-secondary-dark: var(--color-spi-black);
    --color-third:var(--color-spi-black);
    --color-third-dark: var(--color-spi-black);

    --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;
 
}