:root {

    /*Sets primary color hue, saturation and lightness */
    --primary-color-h: "0";
    --primary-color-s: "0%";
    --primary-color-l: "100%";

    /*Sets global variables based on primary color hsl */
    --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
    --border-color: "";
    --navbar-link__background-color--hover: var(--border-color);
    --navbar-link__background-color--active: var(--navbar-link__background-color--hover);
    --primary-hover: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 5%));
    --primary-active: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 10%));
    --primary-background: hsla(var(--primary-color-h), calc(var(--primary-color-s) + 30%), calc(var(--primary-color-l) + 30%), 0.1);
    --progress-loading-third__background-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 15%));
    --secondary-hover: hsla(var(--primary-color-h),var(--primary-color-s),var(--primary-color-l), 0.1);
    --secondary-active: hsla(var(--primary-color-h),var(--primary-color-s),var(--primary-color-l), 0.25); 
    }