:root {
    /* Header, content and footer styling */
    --header-color: var(--primary);
    --header-logo-color: var(--secondary);
    --header-link-color: var(--secondary);
    --header-link-hover-color: var(--smoke-light);

    --account-menu-drop-down-color: var(--primary-dark);
    --account-menu-drop-down-color-dark: var(--primary-extra-dark);

    --content-scrollbar-thumb-color: var(--primary);
    --content-scrollbar-background-color: var(--secondary);

    --footer-color: var(--secondary);
    --footer-border: 2px solid var(--secondary-dark);
    --contact-us-color: var(--smoke-dark);
    --contact-us-hover-color: var(--smoke);

    /* Content colors */
    --background-color: var(--secondary);

    /* Home Page */
    --buttons-section-background: none;
    --buttons-section-button-color:  var(--secondary);
    --buttons-section-button-background-color: var(--primary);
    --buttons-section-button-hover-color: var(--secondary-light);
    --buttons-section-button-background-hover-color: var(--primary-light);
    --buttons-section-button-highlighted-background-color: var(--warn);
    --buttons-section-button-highlighted-color: var(--rasin-black);
    --buttons-section-button-highlighted-hover-background-color: var(--warn-light);
    --buttons-section-button-highlighted-hover-color: var(--rasin-black);

    /* Gantt View Page */
    --modal-form-title-background-color: var(--primary-extra-dark);
    --modal-form-title-text-color: var(--secondary-light);
    --modal-form-title-text-hover-color: var(--secondary);
    --modal-form-background-color: var(--secondary-light);
    --modal-form-text-color: var(--rasin-black);
    --modal-submit-button-color: var(--secondary);
    --modal-close-button-background-color: var(--error);
    --modal-close-button-hover-background-color: var(--error-light);

    /* Gantt Chart */
    --gantt-head-background-color: var(--rasin-black);
    --gantt-head-title-text-color: var(--secondary);




    /* Defined colors */
    --primary-extra-dark: #00106F;
    --primary-dark: #00207F;
    --primary: #00308F;
    --primary-light: #0038B0;

    --secondary-dark: #BEBEBE;
    --secondary: #F9f9f9;
    --secondary-light: white;

    --error-dark: #5D1009;
    --error: #EE5244;
    --error-light: #F7AAA1;

    --tan-dark: #724B09;
    --tan: #F9DDAD;
    --tan-light: #FEF7EC;

    --warn-dark: #796B01;
    --warn: #F5D800;
    --warn-light: #F5E300;
    --warn-lighter: #FFF399;

    --good-dark: #183A22;
    --good: #61BD7C;
    --good-light: #92DDAE;

    --mint-dark: #0A4838;
    --mint: #52E385;
    --mint-light: #DBFAF2;

    --support-dark: #0D4A6D;
    --support: #1B98E0;
    --support-light: #B6DFF6;

    --deep-dark: #0C1931;
    --deep: #27509F;
    --deep-light: #3A6ECF;

    --violet-dark: #1E064B;
    --violet: #9968F3;
    --violet-light: #CBB3F9;

    --maroon-dark: #450D1E;
    --maroon: #AE204B;
    --maroon-light: #E887A4;

    --smoke-extra-dark: #3D3D3D;
    --smoke-dark: #4D4D4D;
    --smoke: darkgrey;
    --smoke-light: lightgrey;

    --editor-panel-color: #EBF1FF;
    --editor-panel-button-hover: #DCE3F2;

    --rasin-black: #1C1D22;
}

body {
    margin: 0;
}