:root {
    --color-true-white: #ffffff;
    --color-true-black: #000000;

    --color-white: #ffffff;
    --color-grey: #6c6c6c;
    --color-black: #000000;

    --color-grey-light: #f8f8f8;
    --color-grey-dark: #c4c4c4;

    --color-primary: #00FF00;
    --color-secondary: #00FFFF;
    --color-tertiary: #FF0000;

    --color-primary-light: #A0F8A6;
    --color-secondary-light: #60FDFD;
    --color-tertiary-light: #FF6161;

    --color-primary-dark: #00D70E;
    --color-secondary-dark: #00B6B6;
    --color-tertiary-dark: #9B0000;

    --color-text-black: var(--color-black);
    --color-text-grey: var(--color-grey);
    --color-text-white: var(--color-white);

    --color-text-on-primary: var(--color-black);
    --color-text-on-secondary: var(--color-black);
    --color-text-on-tertiary: var(--color-black);

    --color-text-on-primary-light: var(--color-white);
    --color-text-on-secondary-light: var(--color-white);
    --color-text-on-tertiary-light: var(--color-white);

    --color-text-on-primary-dark: var(--color-white);
    --color-text-on-secondary-dark: var(--color-white);
    --color-text-on-tertiary-dark: var(--color-white);

    --color-success: #155724;
    --color-success-background: #d4edda;
    --color-success-border-color: #c3e6cb;
    --color-error: #FF0000;

    --color-background: var(--color-white);
    --color-background-reverse: var(--color-black);

    --font-familly: Verdana, Calibri, sans-serif;
    --font-family-title: var(--font-familly);
    --font-size: 18px;
    --text-color: var(--color-black);
    --text-color-reverse: var(--color-text-white);
}