/*
Theme Name: Firmament Child
Theme URI: https://mereagency.com/
description: A simple child theme for the Firmament framework
Author: Andrew Joyce
Author URI: https://mereagency.com/
Template: firmament
Version: 1.0.0
Tags: firmament, clean, basic, responsive-layout
Text Domain: firmament-child
*/
:root {
  --white: hsl(0,0%,100%);
  --grey_1: hsl(0,0%,90%);
  --grey_2: hsl(0,0%,80%);
  --grey_3: hsl(0,0%,70%);
  --grey_4: hsl(0,0%,60%);
  --grey_5: hsl(0,0%,50%);
  --grey_6: hsl(0,0%,40%);
  --grey_7: hsl(0,0%,30%);
  --grey_8: hsl(0,0%,20%);
  --grey_9: hsl(0,0%,10%);
  --black: #000;
  --large-text: calc(var(--site-font-size)*1.25);
  --regular-text: var(--site-font-size);
  --tiny-text: calc(var(--site-font-size)*0.75);
  --micro-text: calc(var(--site-font-size)*0.5);
}

/* Set your fonts here. I'm just using arial but you could set up webfonts.
/* mixins will push this snippet throughout the entire site: nifty! */
h6, .zeta, h5, .epsilon, h4, .delta, h3, .gamma, h2, .beta, h1, .alpha {
  font-family: Arial, Helvetica, Tahoma, sans-serif;
}

/* HEADINGS */
/* Here's some ground rules -- if you need a heading to "look" important, but it's actually not: use a class. h5.beta conveys that you want this h5 to LOOK like an h2, but semantically it's still an H5. Useful stuff! */
/* Also, these are super basic heading styles -- fill in your own! */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin-bottom: var(--site-font-size);
}

h1, .alpha {
  font-size: calc(var(--regular-text)*3);
  margin-bottom: calc(var(--site-font-size)*2);
  margin-top: var(--site-font-size);
}

h2, .beta {
  font-size: calc(var(--regular-text)*2);
  margin-bottom: var(--site-font-size);
  margin-top: var(--site-font-size);
}

h3, .gamma {
  font-size: calc(var(--regular-text)*1.5);
  margin-bottom: calc(var(--site-font-size)/2);
  margin-top: calc(var(--site-font-size)/2);
  text-transform: uppercase;
}

h4, .delta {
  color: var(--primary);
  font-size: var(--large-text);
  font-weight: 700;
  margin-bottom: calc(var(--site-font-size)/2);
  margin-top: calc(var(--site-font-size)/3);
  text-transform: uppercase;
}

h5, .epsilon {
  font-size: var(--site-font-size);
  margin-bottom: calc(var(--site-font-size)/3);
  margin-top: calc(var(--site-font-size)/3);
  font-weight: 700;
}

h6, .zeta {
  font-size: var(--tiny-text);
  font-weight: 700;
  margin-bottom: calc(var(--site-font-size)/3);
}

/* Let's define some simple button styles */
/* role=button: basic button styles */

/*# sourceMappingURL=style.css.map */