Link in a stylesheet and set the meta-viewport

To add style to a page, we have to tell the browser where to find the
stylesheet to apply. We do that with the
[`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
tag

Mobile Safari and Android expect pages not to be mobile-friendly by default; so
to tell these browsers that we are handling mobile-ness on our own; we
use the `meta` tag and set the `viewport` attributes: [meta
viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics)
Reset all styles

Because browsers have different defaults; it's generally a good idea to
reset all elements styles. I'm using the html5doctor reset stylesheet.
For a deeper understanding of CSS resets; cssreset.com's [Which css
reset should I
use?](http://www.cssreset.com/which-css-reset-should-i-use/) is
fantastic.
Initial layout

Here I:

1. Make the page 20 `em`s wide
2. Center the page with `margin-left: auto; margin-right: auto`
3. Make the fonts helvetica. Because that's what my designer friends
   tell me to do
4. Add some vertical white-space between headings, paragraphs, input fields, and
   buttons
5. Make the buttons a touch bigger

I use `em`s exclusively because they're agnostic of pixel density.
What's pixel density? It's the number of pixels crammed into a square
inch of screen-space. The Retina display Macbook Pros have almost twice
as many pixels per square inch as iPhones. While mac software handles
this quite well; the android and windows eco-systems... don't.

Basically, `em`s makes my life easier when I eventually need to support
android and windows devices.
Merge pull request #12 from codeunion/7-mobile-first-layout

Introduce Mobile-First layout