* {
  &, &:before, &:after {
    box-sizing: border-box;
  }
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: (_strip-unit(_base-font-size-px) / 16 * 100%);
}

body {
  color: _color-text;
  font-family: _font-family;
  _font-size-line-height(_base-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, kbd, pre, samp {
  _font-size-line-height(_base-font-size-px - 2);
  font-family: '_', monospace;
}

input, textarea, keygen, select, button {
  font-family: _font-family;
}

input, textarea, optgroup, select, button {
  _line-height(_base-font-size);
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

p, ul, ol, dl, table, pre, blockquote {
  _margin(0, 0, _base-margin-bottom);
}

figure {
  _margin(0, 0, _base-margin-bottom);
}

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

h1 {
  _font-size-line-height(_base-font-size * _h1-font-size-scale);
  _margin-top(_h1-margin-top);
  _margin-bottom(_h1-margin-bottom);
}

h2 {
  _font-size-line-height(_base-font-size * _h2-font-size-scale);
  _margin-top(_h2-margin-top);
  _margin-bottom(_h2-margin-bottom);
}

h3 {
  _font-size-line-height(_base-font-size * _h3-font-size-scale);
  _margin-top(_h3-margin-top);
  _margin-bottom(_h3-margin-bottom);
}

h4 {
  _font-size-line-height(_base-font-size * _h4-font-size-scale);
  _margin-top(_h4-margin-top);
  _margin-bottom(_h4-margin-bottom);
}

h5 {
  _font-size-line-height(_base-font-size * _h5-font-size-scale);
  _margin-top(_h5-margin-top);
  _margin-bottom(_h5-margin-bottom);
}

h6 {
  _font-size-line-height(_base-font-size * _h6-font-size-scale);
  _margin-top(_h6-margin-top);
  _margin-bottom(_h6-margin-bottom);
}

ol ol, ol ul, ul ol, ul ul {
  margin-bottom: 0;
}

dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}

blockquote {
  border-left: (_base-font-size / 2) solid _lighter(_color-gray);
  margin-left: 0;
  padding: _base-font-size 0 _base-font-size _base-font-size;

  :last-child {
    margin-bottom: 0;
  }

  footer {
    color: _darker(_color-gray);
    font-size: 90%;
  }
}

code {
  background-color: _lighter(_color-red);
  border-radius: _border-radius;
  color: _color-red;
  padding: 2px 4px;
}

pre {
  background-color: _lightest(_color-gray);
  border: 1px solid _lighter(_color-gray);
  border-radius: _border-radius;
  padding: _base-font-size;
  overflow: auto;

  code {
    background-color: transparent;
    border: none;
    color: _color-text;
    font-size: 100%;
    padding: 0;
  }
}

label {
  cursor: pointer;
}