:root{
    --cl-white: #ffffff;
    --cl-black: #212122;
    --cl-gray:#818181;

    --cl-col1:48 74 110;

    --cl-col2:202, 175, 139;
    --pp :rgb(202, 175, 139);
    --cl-col3:101 212 29;
    --cl-col4:226, 234, 229;
    --cl-col5:101, 101, 101;
    --cl-col6:#ece4c8;
    --cl-col7:#f7f3e8;
    --cl-col8:#fcfaf6;

    --cl-tx1:#ffffff;
    --cl-tx2:rgb(11, 3, 127);

    --with-1:1400px;
    --with-2:1200px;
    --with-3:900px;
    --with-4:100%;
    --with-5:100%;
    --with-6:100%;

    --pad-1:0;
    --pad-2:0;
    --pad-3:0;
    --pad-4:10%;
    --pad-5:2%;
    --pad-6:2px;


    --cl-primary:    rgb(var(--cl-col1));
    --cl-primary-a:    rgba(var(--cl-col1),0.2);
    --cl-secondary:  rgb(var(--cl-col2));
    --cl-secondary-a:  rgba(var(--cl-col2),0.2);
    --cl-accent :  rgb(var(--cl-col3));
    --cl-accent-a :  rgba(var(--cl-col3),0.2);

    --cl-text-p: var(--cl-tx1);
    --cl-text-s: var(--cl-tx2);
    --cl-text-a: var(--cl-tx2);

    --cl-bg-default:  var(--cl-white);
    --cl-bg-light:  rgb(var(--cl-col2));
    --cl-bg-dark:  rgb(var(--cl-col4));


    --fnt-h: Arial, Helvetica, sans-serif;
    --fnt-d: Arial, Helvetica, sans-serif;;
    --header-height : 3.5rem;
    --font-medium:300;
    --font-size-normal:20px;
}