base.css

@charset "UTF-8";



/* VARIABLES -------------------------------------------------------------- */

:root {
  --heading-font: 'Open Sans', sans-serif;
  --main-font: 'Open Sans', sans-serif;
  --minor-font: 'Open Sans', sans-serif;
  --heading-color: rgba(0,0,50,.9);
  --main-color: rgba(70,70,90,.9);
  --minor-color: rgb(190,190,200);
  --emphasis-color: rgb(27,211,165);
}



/* DEFAULTS --------------------------------------------------------------- */

html {
  color: var(--main-color);
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 400;
}

/* TYPOGRAPHY ------------------------------------------------------------- */

.primary-heading {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 400;
  width: 300px;
}

.box-shadow-transition {
  box-shadow: inset 0 -.5em 0 rgb(145,252,240);
  transition: box-shadow .2s ease-in-out;
}

.box-shadow-transition:hover {
  box-shadow: inset 0 -1.4em 0 rgb(255,200,200);
}

/* LINKS & BUTTONS -------------------------------------------------------- */

/* LAYOUT ----------------------------------------------------------------- */

/* COMPONENTS ------------------------------------------------------------- */

/* COSMETIC --------------------------------------------------------------- */

/* UTILITY ---------------------------------------------------------------- */

/* STATE ------------------------------------------------------------------ */