/** Variables
 ---------------------------------------------------------*/

:root {
  --dim-micro: 6px;
  --dim-small: 12px;
  --dim-medium: 24px;
  --dim-mega: 48px;

  --base-xs: 6px;
  --base-s: 18px;
  --base-m: 24px;
  --base-l: 30px;
  --base-xl: 42px;
  --base-xxl: 60px;

  --base-font-xs: 10px;
  --base-font-s: 14px;
  --base-font-m: 17px;
  --base-font-l: 23px;
  --base-font-xl: 60px;
}

/**
 * 1. Apply a natural box layout
 *    model to all elements
 */

*,
*:after,
*:before {
  box-sizing: border-box; /* 1 */
  font: inherit;
  margin: 0;
}

/** Document
 ---------------------------------------------------------*/

html {
  height: 100%;
}

/** Body
 ---------------------------------------------------------*/

body {
  height: 100%;
  font: 300 17px/21px 'FiraSans';
  background-color: var(--background);
  color: var(--text-color);
  padding: 0;
}

/** Tags
 ---------------------------------------------------------*/

a {
  color: var(--highlight-color, inherit);
  text-decoration: none;
  font-style: italic;
}

hr {
  height: 1px;
  margin: var(--dim-small) 0 var(--dim-small) 0;
  border: 0;
  background:
    var(--border-color,
    var(--background-plus,
    rgba(0,0,0,0.2)));
}

em {
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 300;
}

.alpha {
  font-size: 23px;
  font-weight: 200;
  font-style: italic;
  line-height: 26px;
  margin: 6px 0 24px 0;
}

.beta {
  font-size: 17px;
  font-weight: 400;
  margin: 32px 0 16px 0;
}

.gamma {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: normal;
  margin: 32px 0 16px 0;
}

.milli {
  font-size: 14px;
  font-weight: 300;
}

.large {
  font-size: 23px;
  line-height: 26px;
}

.mega {
  font-size: 60px;
  line-height: 60px;
  font-style: normal;
}

.giga {}
.kilo {}

/* alignment */
.l-align-right { float: right; }
.l-align-left { float: left; }
.l-align-center { text-align: center; }
.l-text-align-left { text-align: left; }
.l-text-align-right { text-align: right; }
.l-text-valign-top {
  vertical-align: top;
}

.l-width-full {
  width: 100%;
}

/** Flexbox
 ---------------------------------------------------------*/

.l-flex { display: flex; }
.l-flex-col { display: flex; flex-direction: column; }

.l-flex-col-v-align {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.l-flex-v-align { align-items: center; }
.l-flex-h-align { justify-content: center; }
.l-flex-grow { flex: 1; }

/** Margin
 ---------------------------------------------------------*/

/* Top */

.l-mt-small { margin-top: var(--dim-small); }
.l-mt-med { margin-top: var(--dim-medium); }

/* Bottom */

.l-mb-small { margin-bottom: var(--dim-small); }
.l-mb-med { margin-bottom: var(--dim-medium); }
.l-mb-large {}
.l-mb-mega { margin-bottom: var(--dim-mega); }

/* Left */

.l-ml-small { margin-left: var(--dim-small); }

/* Right */

.l-mr-small { margin-right: var(--dim-small); }

/* Auto */

.l-mlr-auto { margin-left: auto; margin-right: auto; }
.l-m-auto { margin: auto }

/* Margin */

.l-m-small { margin: var(--dim-small) }
.l-m-med { margin: var(--dim-medium) }
.l-m-0 { margin: 0 }

/** Padding
 ---------------------------------------------------------*/

.l-p-small { padding: var(--dim-small); }
.l-pl-small { padding-left: var(--dim-small); }
.l-pr-small { padding-right: var(--dim-small); }
.l-plr-small {
  padding-right: var(--dim-small);
  padding-left: var(--dim-small);
}
.l-pb-small { padding-bottom: var(--dim-small); }
.l-pt-small { padding-top: var(--dim-small); }
.l-pt-mega { padding-top: var(--dim-mega); }
.l-pt-micro { padding-top: var(--dim-micro); }
.l-pb-micro { padding-bottom: var(--dim-micro); }
.l-p-0 { padding: 0 ;}

/** Helpers
 ---------------------------------------------------------*/

.l-clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.l-inline-block {
  display: inline-block;
}

.is-hidden {
  display: none !important;
}

.is-invisible {
  visibility: hidden !important;
}