/*Universal custom properties (variables) */

:root {

/* Spacing */

--gap: 1.5rem; 
--gapn: -1.5rem; 

/* Block content widths */

--width-standard:700px;
--width-wide:960px;
--width-max:1600px;

--width-limit: calc(100% - 3rem);

/* Padding Flex */

--padding3: clamp(1.5rem, 4vmin, 3rem);

/* Colors */

--gray: #F2F2F2; 
--gray-light: #F8F8F8;
--gray-line: #ddd;
--dark: #444;
--gold: #FFAF55;
--green: #0AAA87;
--purple: #32007D;
--red: #FF6363;


--link-color: var(--green);

--selection-bgcolor: var(--purple);
--selection-textcolor: #fff;

--txt-dark:rgba(0,0,0,0.6);
--txt-light: rgba(255,255,255,0.6);

/* Typography */

--fallback: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;

--sans: 'Montserrat', var(--fallback); 
--serif: 'Judson', var(--fallback);  
--mono: 'Courier New', Courier, monospace;

--txt-xsmall: clamp(10px, 1vw, 12px);   /* tiny */

--txt-small: clamp(12px, 1vw, 14px);    /* h6 */
--txt-base: clamp(15px, 2.5vw, 18px);     /* h5 & paragraph text */
--txt-medium: clamp(20px, 4vw, 24px);   /* h4 */
--txt-large: clamp(20px, 5vw, 24px);     /* h3 */
--txt-xlarge: clamp(24px, 6vw, 30px);    /* h2 */
--txt-xxlarge: clamp(36px, 7vw, 40px);   /* h1*/

--txt-xxxlarge: clamp(40px, 8vw, 60px);  /* jumbo */    

/* Form fields */

--field-radius: 10px;
--field-padding: 0 0.75em !important;
--field-border: solid 1px #ddd;
--field-bgcolor: var(--gray-line);

--field-border-focus: solid 1px #000;
--field-bgcolor-focus: lightyellow;
--field-shadow-focus: 0 3px 0.3em rgba(0,0,0,0.3);


/* Form inputs and button height */

--input-height: 2.5em;

/* Border radius */

--radius: 10px 0;
--border: solid 1px var(--gray-line);


/* Social Colors */

--facebook: #1977f3;
--linkedin: #0274b3;
--twitter: #1da1f2;
--reddit: #ff5600;
--tumblr: #314358;
--pocket: #ef4056;
--youtube: #FF0000;
--rss: #f26522;
--pinterest: #bd081c;
--vimeo: #1ab7ea;
--instagram: #c13584;

}