:root {

--font-family-sans:       system-ui, -apple-system, 'Segoe UI', 'Roboto', Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-serif:      Georgia, 'Times New Roman', serif;
--font-family-monospace:  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-family-cursive:    cursive;

/* an ideal reading width - 48rem - 768px based off 16px:1rem */
/* 42 is an interesting number. ;-) */
/* remember to set this to media-queries too if you are not handling it separately */
--body-width: 42rem;

/* default: minor third scale progression */
--typescale-body: 1.2;

/* headings:  major third scale progression */
--typescale-heading: 1.25;

/* spacings */
--spacing-heading: 1rem;

/* default: minor third scale progression */
--space-ratio: 1.2;

--space-base: 1;
--space-base-px: 16px;
--space-base-em: 1em;
--space-base-rem: 1rem;

--spacescale0: 1;
--spacescale1: var(--space-ratio);                            /* 1.2   */
--spacescale2: calc(var(--space-ratio) * var(--spacescale1)); /* 1.44  */
--spacescale3: calc(var(--space-ratio) * var(--spacescale2)); /* 1.728 */
--spacescale4: calc(var(--space-ratio) * var(--spacescale3)); /* 2.074 */
--spacescale5: calc(var(--space-ratio) * var(--spacescale4)); /* 2.488 */
--spacescale6: calc(var(--space-ratio) * var(--spacescale5)); /* 2.986 */
--spacescale7: calc(var(--space-ratio) * var(--spacescale6)); /* 3.583 */

/* space - try to use these */
--space-base: var(--space-base-rem);
--space-half: calc(var(--space-base-rem) / 2);
--space-quarter: calc(var(--space-base-rem) / 4);
--space-double: calc(var(--space-base-rem) * 2);

/* typography */
--font-family: var(--font-family-sans);
--font-family-headings: var(--font-family-sans);

--font-size: 16px;
--font-size-small: 85%;
--font-size-smaller: 70%;
--font-size-smallest: 65%;
--font-size-large: 115%;
--font-size-larger: 130%;

--line-height: 1.618;
--line-height-heading: 1.25;

--border-width: 1px;
--border-width-alt: 3px;

--border-radius: 0.3rem;
--border-radius-high: 0.7rem;
--border-radius-round: 100%;

--image-width-max: 1200px; /*there is a limit to how wide an image can be*/

/* color - standard */
--color-black: #000000;
--color-white: #ffffff;

/* derived from the color theme */
--background-color-accent: var(--color-accent);

--border-color: var(--background-color-highlight);
--border-color-highlight: var(--color-primary);

--text-color-link: var(--color-primary);
--text-color-link-visited: var(--text-color-link);
--text-color-link-hover: var(--color-secondary);
--text-color-link-active: var(--text-color-link-hover);

--form-button-text-color: var(--background-color-alt);
--form-button-background-color: var(--color-primary);

--opacity-no: 1;
--opacity-low: 0.9;
--opacity-lower: 0.75;
--opacity-lowest: 0.6;

--transition-duration: 0.4s;

}

@media (prefers-color-scheme: dark) {

img, video {
  opacity: var(--opacity-low);
}

}

/* remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) {

body {
  scroll-behavior: auto;
}

* {
  -webkit-animation: none !important;
  animation: none !important;
  transition: none !important;
}

}

/* when serif font-family for main content */ {% if site.styles.font_family == 'serif' %} :root {

--font-family: var(--font-family-serif);
--font-family-headings: var(--font-family-serif);

} {% endif %}