body {
    /*--main-green: #99CC33;
    --main-blue: #0DA3E2;
    --main-black: #201F20;
    --sec-black: #2C2B2D;
    --third-black: #423F42;
    --light-gray: #8A888B;*/
    /* main colors */


    --main-color: #2C2B2D;
    --strong-color: #201F20;
    --very-strong-color: #131314;
    --active-color: #423F42;
    --active-bright-color: #3b393b;
    --accentuated-color: #99CC33;
    --significant-color: #0DA3E2;
    --ancillary-color: #8A888B;
    --main-txt: #F0F0F0;
    --dim-txt: #e0e0e0;
    --ancillary-txt: var(--ancillary-color);
    --active-txt: var(--accentuated-color);
    --hover-txt: var(--significant-color);
    --shadow-color: rgba(0, 0, 0, 0.65);
    --tooltip-bg: #777777;


    /* top panels */
    --top-row-bg: var(--very-strong-color);
    --sec-row-bg: var(--strong-color);
    --top-sep-color: var(--active-color);
    --btn-bg: var(--strong-color);
    --btn-txt: var(--main-txt);
    --nav-btn-hover-bg: var(--accentuated-color);
    --nav-btn-hover-txt: var(--main-txt);
    --act-btn-hover-bg: var(--significant-color);
    --act-btn-hover-txt: var(--strong-color);
    --manage-btn-txt: var(--significant-color);
    --manage-btn-hover-bg: var(--significant-color);
    --manage-btn-hover-txt: var(--strong-color);
    --tool-bg: var(--active-color);


    /*floating ribons*/
    --fr-main-bg: var(--main-color);
    --fr-active-bg: var(--active-color);
    --fr-active-txt: var(--accentuated-color);
    --fr-main-border: #000000;
    --fr-in-border: var(--ancillary-color);
    --fr-input-bg: var(--ancillary-color);
    --fr-hover-bg: var(--main-color);


    /*categories*/
    --content-cat-color: #16CCE8;
    --button-cat-color: #F14163;
    --code-cat-color: #EF7E0E;
    --social-cat-color: #1CDFA5;
    --form-cat-color: #A379DA;
    --current-cat-color: var(--content-cat-color);


    --hotjar-color: #DB2136;
}