/*Universal custom properties (variables) */

:root {

/* Spacing */

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

/* Block content widths */

--width-standard:850px;
--width-wide:var(--width-max);
--width-max:1440px;

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

/* Colors */

--gray: #F8F8F8;
--dark: #3E3E3E;
--red: #CA0123;
--blue: #1d66ab; 

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

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

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

/* Typography */

--fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;

--sans: 'Poppins', var(--fallback); 
--serif: 'Open Sans', var(--fallback);
--mono: 'Courier New', Courier, monospace;

--txt-xsmall:  clamp(10px, 1vw, 12px);  /* tiny */
--txt-small:   clamp(12px, 2vw, 14px);  /* h6 */
--txt-base:    clamp(14px, 3vw, 16px);  /* h5 & paragraph text */
--txt-medium:  clamp(16px, 4vw, 18px);  /* h4 */
--txt-large:   clamp(18px, 5vw, 24px);  /* h3 */
--txt-xlarge:  clamp(24px, 6vw, 36px);  /* h2 */
--txt-xxlarge: clamp(36px, 7vw, 40px);  /* h1*/

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

/* Form fields */

--field-radius: 4px;
--field-padding: 0 0.5em !important;
--field-border: solid 1px #CACDCE;
--field-bgcolor: var(--gray);

--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: 3em;

/* Border radius */

--radius: 4px;
--border: solid 1px #CACDCE;


/* Social Colors */

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

}