Bootstrap reboot.scss rewritten in pure CSS

reboot.css

/**
 * Global styles based on Reboot.css
 * http://v4-alpha.getbootstrap.com/content/reboot/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss
 */

/*
  Reset the box-sizing

  Change from `box-sizing: content-box` to `border-box` so that when you add
  `padding` or `border`s to an element, the overall declared `width` does not
  change. For example, `width: 100px;` will always be `100px` despite the
  `border: 10px solid red;` and `padding: 20px;`.

  Heads up! This reset may cause conflicts with some third-party widgets. For
  recommendations on resolving such conflicts, see
  http://getbootstrap.com/getting-started/#third-box-sizing.

  Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/*
  Make viewport responsive

  @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
  some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
  Eventually @viewport will replace <meta name="viewport">.

  However, `device-width` is broken on IE 10 on Windows (Phone) 8,
  (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
  and the fix for that involves a snippet of JavaScript to sniff the user agent
  and apply some conditional CSS.

  See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
*/

@-ms-viewport {
  width: device-width;
}

/*

  Reset HTML, body, and more

*/

html {
  /* Sets a specific default `font-size` for user with `rem` type scales. */
  font-size: 10px;
  /*
    As a side-effect of setting the @viewport above,
    IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
    Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
    thus making it hard to click on stuff near the right edge of the page.
    So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
    See https://github.com/twbs/bootstrap/issues/18543
  */
  -ms-overflow-style: scrollbar;
  /* Changes the default tap highlight to be completely transparent in iOS */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 1.58;
  letter-spacing: -.003em;
  color: #222;
  background-color: #fff;
}


/*
  Suppress the focus outline on elements that cannot be accessed via keyboard.
  This prevents an unwanted focus outline from appearing around elements that
  might still respond to pointer events.
  Credit: https://github.com/suitcss/base
*/
[tabindex="-1"]:focus {
  outline: none !important;
}

/*

  Typography

*/

/*
  Remove top margins from headings

  By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
  margin for easier control within type scales as it avoids margin collapsing.
*/
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}


/*
  Reset margins on paragraphs

  Similarly, the top margin on `<p>`s get reset. However, we also reset the
  bottom margin to use `rem` units instead of `em`.
*/
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Abbreviations and acronyms */
abbr[title],
/* Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 */
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #bbb;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

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

dt {
  font-weight: bold;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0; /* Undo browser default */
}

blockquote {
  margin: 0 0 1rem;
}

/*

  Links

*/

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #555;
  text-decoration: underline;
}

a:focus {
  /*
    WebKit-specific. Other browsers will keep their default outline style.
    (Initially tried to also force default via `outline: initial`,
    but that seems to erroneously remove the outline in Firefox altogether.)
  */
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/*
  TODO: Complete  
*/