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;
}



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

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

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

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

.sibling-fade {
  display: flex;
  padding: 0;
}

.sibling-fade__item {
  list-style-type: none;
  padding: 0 1rem;
  transition: opacity 0.2s;
}

.sibling-fade:hover .sibling-fade__item:not(:hover) {
  opacity: 0.4;
}

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

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