:root {
    --green: #3b9656;
    --red: #8c2626;
    --red-light: rgb(168, 66, 66);

    --dark-green: #008000ff;
    --purple: #793A92;
    --yellow: #a18b0a;
    --blue: #313B72;
    --orange: #CC4E00;
    --cyan: #16A286;

    --male-blue: #5f96c9;
    --female-pink: #f69ae1;
    --employee-blue: #4b729f;
    --employee-red: #b9526b;

    --light-blue: #2a819c;

    /* unit colors */
    --color_government: #442178ff;
    --color_household: #a05a2cff;
    --color_financial_market: #2ca05aff;
    --color_economy: #c8ab37ff;

    /* player */
    --color_player: #008080ff;

    /* feedback colors */
    --feedback-green: var(--green);
    --feedback-red: var(--red);

    /* plain colors */
    --white: rgba(255, 255, 255, 1);
    --light: rgba(246, 246, 246, 1);
    --dark: rgba(16, 16, 16, 1);
    --dark-light: rgba(48, 48, 48, 1);
    --dark-alpha: rgba(16, 16, 16, 0.6);
    --gray-alpha: rgba(52, 24, 24, 0.05);
    --gray: rgba(232, 232, 232, 1);

    /* text colors */
    --text: var(--dark);
    --text-light: var(--dark-light);
    --text-inactive: var(--dark-alpha);

    /* element colors */
    --nav-color: var(--light);
    --footer-color: var(--light);
    --link: var(--light-blue);


    /* font */
    --main-font: 'Outfit';
    --brand-font: var(--main-font);

    /* sizes */
    --page-w: 768px;
}

.blue {
    color: var(--light-blue)
}

.green {
    color: var(--green)
}

.yellow {
    color: var(--yellow);
}

.red {
    color: var(--red-light);
}

.player {
    color: var(--color_player);
}