html {
  font-size: 14px;
}

html, body {
  height: 100%;
}

body {
  background: #fdfdfd;
  color: #212121;

  /* mobile first system ui font stack */
  font-family: -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
  "Fira Sans", "Droid Sans", "Helvetica Neue",
  sans-serif;

  margin: 0 auto;
  line-height: 1.625rem;  /* 26px */
}

/**
 * Buttons
 *
 * All things buttons.
 *
 * @section
 * @page Buttons
 */

/**
 * Buttons
 *
 * The Button `.btn` class can be applied to `<button>`, `<input>`, or `<a>` elements.
 *
 * @section
 * @sectionof Buttons
 *
 * @example
 * <button class="btn">Button</button>
 * <input type="submit" class="btn" value="Input"/>
 * <a href="#" class="btn">Anchor</a>
 */
.btn {
  background-color: #ddd;
  border-radius: 4px;
  border: 2px solid transparent;
  color: black;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  padding: 5px 15px;
  text-decoration: none;
}

.btn:hover,
.btn:focus,
.btn:active {
  background-color: #aaa;
  text-decoration: none;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.5;
}

/**
 * Primary Button
 *
 * A primary button
 *
 * @section
 * @sectionof Buttons
 *
 * @example
 * <button class="btn primary">Button</button>
 * <input type="submit" class="btn primary" value="Input"/>
 * <a href="#" class="btn primary">Anchor</a>
 */
.btn.primary {
  background-color: #60b044;
  background-image: linear-gradient(#8add6d, #60b044);
  border-color: #5ca941;
  color: #fff;
}
.btn.primary:hover {
  background-color: #569e3d;
  background-image: linear-gradient(#79d858, #569e3d);
  border-color: #4a993e;
}

.btn.smaller {
  font-size: 10px;
  padding: 4px 10px;
}

/**
 * Typography
 *
 * Defaults typography styles.
 *
 * @section
 * @page Typography
 */

/**
 * Headings
 *
 * @section
 * @sectionof Typography
 *
 * @example
 * <h1>Heading H1</h1>
 * <h2>Heading H2</h2>
 * <h3>Heading H3</h3>
 * <h4>Heading H4</h4>
 * <h5>Heading H5</h5>
 * <h6>Heading H6</h6>
 */
h1, h2, h3, h4 {
  font-family: "Skolar Bold", "Segoe UI Bold", "Roboto Slab", "Droid Serif",
  AvenirNext-Bold, "Avenir Bold", Georgia,
  "Times New Roman", Times, serif;
  margin: 0;
}

h1 {
  font-size: 2.25rem;    /* 36 / 16 */
  line-height: 3.25rem;  /* 1.625 * 2 */
}

h2 {
  font-size: 1.875rem;   /* 30 / 16 */
  line-height: 3.25rem;  /* 1.625 * 2 */
}

h3 {
  font-size: 1.625rem;   /* 26 / 16 */
  line-height: 3.25rem;  /* 1.625 * 2 */
}

h4 {
  font-size: 1.375rem;   /* 22 / 16 */
}

h5 {
  font-size: 1.125rem;   /* 18 / 16 */
}

h4, h5, h6 {
  line-height: 1.625rem;
  margin: 0;
}

/**
 * Paragraphs
 *
 * @section
 * @sectionof Typography
 *
 * @example
 * <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra sed magna eget ullamcorper. Aliquam rutrum dui tempus nibh porta egestas.</p>
 */
 p {
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 0 0 1.625rem 0;
}