:root {
    --text-clr: 255, 255, 255;
    --bg-clr: 33, 37, 41;
    /* --bg-clr: 3, 10, 33; */
    --text-clr-1: 255, 255, 255;
    --text-clr-2: 33, 37, 41;
    --hdr-ftr-text-clr: 0, 0, 0;
    --bg-clr-1: 33, 37, 41;
    --bg-clr-2: 255, 255, 255;
    --brand-clr-1: 118, 47, 201;
    --brand-clr-2: 21, 156, 180;
    --brand-clr-2: 17, 218, 142;
    --brand-clr-2: 0, 247, 216;

    --brand-clr-2: 21, 156, 180;
    /* --brand-clr-2: 7, 193, 227; */
    /* --brand-clr-2: 55, 237, 106; */
    --brand-clr-2: 7, 227, 227;
    --brand-clr-3: 6, 130, 152;
    /* --brand-clr-3: 0, 247, 216; */
    --brand-clr-4: 199, 109, 171;
    --brand-clr-4: 111, 66, 193;
    --brand-clr-4: 148, 0, 211;
    /* --brand-clr-4: 118, 51, 197; */
    /* --card-bg-clr: linear-gradient(-45deg, #159cb4, #07e392); */
    --card-bg-clr: linear-gradient(-45deg, rgb(7, 227, 227), #07e3e3);
    --brand-bg-clr: linear-gradient(-45deg, rgb(var(--brand-clr-2)), rgb(var(--brand-clr-4)));
    --navbar-bg-clr: linear-gradient(-90deg, rgb(var(--brand-clr-2)), rgb(var(--brand-clr-4)), var(--bs-dark) 80%);
    /* --brand-bg-clr: linear-gradient(-45deg, #07e3e3, #07e3e3); */
    --navbar-height: 96px;
    --navlink-clr: 33, 37, 41;
    --navlink-clr: 0, 0, 0;
    --navlink-hover-clr: 255, 255, 255;
    --navlink-hover-clr: 0, 0, 0;
    --max-vw: 1000px;
    --max-hvw: 1200px;
    --max-fvw: 1200px;
}