:root {
	
	--red-notice: #CF4B14;
	
    /* Light Mode Colours */
    --primary-color-light: #e6ba33;
    --secondary-color-light: #434340;
    --background-color-light: #ebebeb;
    --background-color-invert-light: #1a1a1a;
    --shadow-color-light: #8d8d89;
    --blue-shadow-color-light: #0C3340;
    --red-color-light: red;
    --dark-grey-color-light: #211a1d;
    --grey-color-light: #70706B;
    --invert-grey-color-light: #CCCCCC;
    --light-grey-color-light: #d0d0d0;
    --lighter-grey-color-light: #f0f0f0;
    --white-color-light: #ffffff;
	--nav-button-shadow-light: var(--light-grey-color);
	--feye-blue-light: #035874;
	
	--graph-pink-light: rgba(255, 99, 132, 0.2);
	--graph-pink-border: rgba(255, 99, 132, 1);
	--graph-blue-light: rgba(54, 162, 235, 0.2);
	--graph-blue-border: rgba(54, 162, 235, 1);

    /* Dark Mode Colours */
    --primary-color-dark: #ffd700;
    --secondary-color-dark: #F2F2F2;
    --background-color-dark: #1a1a1a;
    --background-color-invert-dark: #ebebeb;
    --shadow-color-dark: #424242;
    --blue-shadow-color-dark: #0C3340;
    --red-color-dark: red;
    --dark-grey-color-dark: #eaeaea;
	--grey-color-dark: #CCCCCC;
	--invert-grey-color-dark: #70706B;
    --light-grey-color-dark: #777777;
    --lighter-grey-color-dark: #4d4d4d;
    --white-color-dark: #F2F2F2;
	--nav-button-shadow-dark: #262626;
	--feye-blue-dark: #00b3db;
	
	--graph-pink-dark: color-mix(in srgb, var(--graph-pink-border) 20%, var(--background-color-dark));
	--graph-blue-dark: color-mix(in srgb, var(--graph-blue-border) 20%, var(--background-color-dark));
	
	/* Gradients */ 
	--body-gradient-light: linear-gradient(180deg, rgba(185,185,185,1) 0%, rgba(211,211,211,1) 10px, rgba(226,226,226,1) 50%);
	--main-content-gradient-light: linear-gradient(90deg, rgba(185,185,185,1) 270px, rgba(211,211,211,0.5) 10px, rgba(226,226,226,0) 50%);
	--mobile-main-content-gradient-light: linear-gradient(90deg, rgba(185,185,185,1) 0px, rgba(211,211,211,0.5) 10px, rgba(226,226,226,0) 50%);
	
	--body-gradient-dark: linear-gradient(180deg, rgba(26, 26, 26, 1) 0%, rgba(51, 51, 51, 1) 10px, rgba(77, 77, 77, 1) 50%);
    --main-content-gradient-dark: linear-gradient(90deg, rgba(26, 26, 26, 1) 270px, rgba(51, 51, 51, 0.5) 10px, rgba(77, 77, 77, 0) 50%);
    --mobile-main-content-gradient-dark: linear-gradient(90deg, rgba(26, 26, 26, 1) 0px, rgba(51, 51, 51, 0.5) 10px, rgba(77, 77, 77, 0) 50%);


    /* Default to Light Mode */
    --primary-color: var(--primary-color-light);
    --secondary-color: var(--secondary-color-light);
    --background-color: var(--background-color-light);
    --background-color-invert: var(--background-color-invert-light);
    --shadow-color: var(--shadow-color-light);
    --blue-shadow-color: var(--blue-shadow-color-light);
    --red-color: var(--red-color-light);
    --dark-grey-color: var(--dark-grey-color-light);
	--grey-color: var(--grey-color-light);
	--invert-grey-color: var(--invert-grey-color-light);
    --light-grey-color: var(--light-grey-color-light);
    --lighter-grey-color: var(--lighter-grey-color-light);
    --white-color: var(--white-color-light);
	--nav-button-shadow: var(--nav-button-shadow-light);
	--secondary-color-invert: var(--secondary-color-dark);
	
	--feye-blue: var(--feye-blue-light);
	
	--graph-pink: var(--graph-pink-light);
	--graph-blue: var(--graph-blue-light);
	
	--body-gradient: var(--body-gradient-light);
	--main-content-gradient: var(--main-content-gradient-light);
	--mobile-main-content-gradient: var(--mobile-main-content-gradient-light);

    /* Font families */
    --font-family-normal: 'UbuntuNormal', Verdana, sans-serif;
    --font-family-bold: 'UbuntuBold', Verdana, sans-serif;
    --font-family-italic: 'UbuntuBoldItalic', Verdana, sans-serif;
    --font-family-condensed: 'UbuntuCondensed', Verdana, sans-serif;
    --font-family-thick: 'UbuntuThick', Verdana, sans-serif;
    --font-family-condensed-normal: 'UbuntuCondensedNormal', Verdana, sans-serif;
    --font-family-medium: 'UbuntuMedium', Verdana, sans-serif;

    /* Font sizes */
    --font-size-very-small: 8px;
    --font-size-small: 10px;
    --font-size-small-plus: 11px;
    --font-size-medium: 12px;
    --font-size-medium-plus: 13px;
    --font-size-large: 15px;
    --font-size-extra-large: 18px;
    --font-size-mega: 22px;
}

.dark-mode {
    /* Override with Dark Mode Colours */
/*    --primary-color: var(--primary-color-dark);*/
    --secondary-color: var(--secondary-color-dark);
    --background-color: var(--background-color-dark);
    --shadow-color: var(--shadow-color-dark);
    --blue-shadow-color: var(--blue-shadow-color-dark);
    --red-color: var(--red-color-dark);
    --dark-grey-color: var(--dark-grey-color-dark);
	--grey-color: var(--grey-color-dark);
	--invert-grey-color: var(--invert-grey-color-dark);
    --light-grey-color: var(--light-grey-color-dark);
    --lighter-grey-color: var(--lighter-grey-color-dark);
    --white-color: var(--white-color-dark);
	--nav-button-shadow: var(--nav-button-shadow-dark);
	--secondary-color-invert: var(--secondary-color-light);
	
	--feye-blue: var(--feye-blue-dark);
	
	--graph-pink: var(--graph-pink-dark);
	--graph-blue: var(--graph-blue-dark);
	
	--body-gradient: var(--body-gradient-dark);
	--main-content-gradient: var(--main-content-gradient-dark);
	--mobile-main-content-gradient: var(--mobile-main-content-gradient-dark);
}

@font-face {
    font-family: 'UbuntuBold';
    src: url('/font/25Ubuntu.woff') format('woff');
}

@font-face {
    font-family: 'UbuntuNormal';
    src: url('/font/60Ubuntu.woff') format('woff');
}

@font-face {
    font-family: 'UbuntuBoldItalic';
    src: url('/font/102Ubuntu.woff') format('woff');
}

@font-face {
    font-family: 'UbuntuNormalItalic';
    src: url('/font/125Ubuntu.woff') format('woff');
}

@font-face {
    font-family: 'UbuntuCondensed';
    src: url('/font/243Ubuntu.woff') format('woff');
}

@font-face {
    font-family: 'UbuntuThick';
    src: url('/font/1133UbuntuThick.woff') format('woff');
}

@font-face {
    font-family: 'UbuntuCondensedNormal';
    src: url('/font/1607UbuntuCondensed.woff') format('woff');
}

@font-face {
    font-family: 'UbuntuMedium';
    src: url('/font/1727UbuntuMedium.woff') format('woff');
}