:root {
    font-size: 16px;
/*FILL IN INFO FOR THESE VARIABLES*/
    --box-shadow: 0 0 3px 0 var(--primary-color-20-opacity);
    --box-shadow-hover: 0 0 7px 0 var(--primary-color-20-opacity);


    /*Set up fonts*/
    --heading-font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;
    --p-font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Lato, "Lucida Grande", sans-serif;

    --h1-font-size: 3.25rem;
    --h1-xl-font-size: 3.75rem;
    --p-subheading-font-size: 1.25rem;
    --h2-font-size: 2.8125rem;
    --h2-xl-font-size: 3rem;
    --h2-m-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h3-m-font-size: 1.75rem;
    --h3-s-font-size: 1.25rem;
    --h3-xs-font-size: 1.125rem;
    --h4-font-size: 1.25rem;
    --h5-font-size: 1.125rem;
    --h6-font-size: 1rem;
    --p-font-size: 1rem;
    --p-s-font-size: 0.875rem;
    --p-xs-font-size: 0.75rem;
    --button-font-size: 1.125rem;
    --button-large-font-size: 1.75rem;
    --button-small-font-size: 0.875rem;

    --font-bold-weight: 700;
    --font-medium-weight: 500;
    --font-regular-weight: 400;
    --font-light-weight: 300;

    --h1-letter-spacing: normal;
    --h2-letter-spacing: normal;
    --h3-letter-spacing: 0.0625rem;
    --p-letter-spacing: 0.0625rem;
    --link-letter-spacing: 0.0625rem;
    --button-letter-spacing: 0.0625rem;

    /*BORDER AND CORNER RADIUS*/
    --border-tp: 2px solid transparent;
    --border-outline: 2px solid var(--outline-button);
    --border-radius: 1.25rem;

    /*transitions and animations details*/
    --transition-duration: .2s;
    --transition-animation: ease-in;
    --default-transition: all var(--transition-duration) var(--transition-animation);
    --button-transition: all var(--transition-duration) var(--transition-animation);


/*AUTOMATIC VARIABLES BASED ON INPUT ABOVE - USUALLY YOU DON'T NEED TO TOUCH*/

    --primary-color-h: 232;  /* Hue */
    --primary-color-s: 48%;  /* Saturation */
    --primary-color-l: 54%;  /* Lightness */
    --primary-color-l-hover: 60%;  /* Adjust lightness for hover by adding 6% to --primary-color-l value (hsl doesn't support calc())*/
    --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));

    --primary-color-hover:hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l-hover));

    --primary-color-90-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.9);
    --primary-color-80-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.8);
    --primary-color-70-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.7);
    --primary-color-60-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.6);
    --primary-color-50-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.5);
    --primary-color-40-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.4);
    --primary-color-30-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.3);
    --primary-color-25-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.25);
    --primary-color-20-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.2);
    --primary-color-15-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.15);
    --primary-color-10-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.1);
    --primary-color-5-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.05);
    --primary-color-2-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.02);
    --primary-color-0-opacity: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0);


    /*Line height*/

    --lh-1-15: 1.15;
    --lh-1-2: 1.2;
    --lh-1-3: 1.3;
    --lh-1-35: 1.35;
    --lh-1-4: 1.4;
    --lh-1-5: 1.5;
    
    --h1-line-height: var(--lh-1-15);
    --h2-line-height: var(--lh-1-2);
    --h3-line-height: var(--lh-1-3);
    --h4-line-height: var(--lh-1-3);
    --p-line-height: var(--lh-1-3);
    --button-line-height: var(--lh-1-3);


    --heading-color: var(--main-dark);
    --link-color: var(--primary-color);
    --link-color-hover: var(--secondary-color-hover);
    --accent-color: var(--primary-color);


    /*BORDER RADIUS CALCS*/

    --button-radius: calc(var(--border-radius) * 0.75);
    --xs-card-radius: 0.5rem;
    --s-card-radius: calc(var(--border-radius) * 1.333);
    --m-card-radius: calc(var(--border-radius) * 1.333);
    --l-card-radius: calc(var(--border-radius) * 1.5);
    --xs-img-radius: 2px;
    --card-img-radius: calc(var(--border-radius) * 1.666);
    --large-img-radius: calc(var(--border-radius) * 2);
    --xl-image-radius: calc(var(--border-radius) * 2.6);


    /*BACKDROP BLUR*/
    --backdrop-blur: blur(24px);
}