@font-face{
  font-family : 'Proza';
  font-weight : 300;
  src         : url('assets/fonts/proza-light.woff2') format('woff2'),
                url('assets/fonts/proza-light.woff') format('woff');
}

@font-face{
  font-family : 'Proza';
  font-weight : 300;
  font-style  : italic;
  src         : url('assets/fonts/proza-light-italic.woff2') format('woff2'),
                url('assets/fonts/proza-light-italic.woff') format('woff');
}

body{
  margin                   : 0;
  padding                  : 0;
  color                    : #333;
  font                     : 300 20px/1.5 Proza,sans-serif;
  font-feature-settings    : 'onum';
  -webkit-text-size-adjust : 100%;
}

body > div{
  max-width : 36em;
  margin    : 0 auto;
  padding   : 4.5em 1em 1.5em;
}

h1,
h2{
  padding : 0;
  color   : #000;
}

h1{
  margin     : 0 0 0.25em;
  font       : 300 40px/1 Proza,sans-serif;
  text-align : center;
}

h2{
  margin : 0 0 0.25em;
  font   : 300 30px/1.25 Proza,sans-serif;
}

p{
  margin  : 0 0 1em;
  padding : 0;
}

a{
  color           : #9c3;
  text-decoration : none;
}

iframe{
  display  : block;
  margin   : 0 auto 1.25em;
  border   : 0;
  overflow : hidden;
}

abbr{
  border         : 0;
  text-transform : lowercase;
  font-variant   : small-caps;
}

cite,
em{
  font-style  : italic;
}

pre{
  margin  : 0 25px 20px;
  padding : 0;
  font    : 12px/16px Consolas,monospace;
}

table{
  margin          : 0 auto 1em;
  border-collapse : collapse;
  border-spacing  : 0;
}

tr:nth-child(odd){
  background : #eee;
}

tr:hover{
  background : #ddd;
}

td,
th{
  border  : 1px solid #fff;
  padding : 4px 8px;
}

th{
  background  : #9c3;
  color       : #fff;
  font-weight : 200;
  text-shadow : 0 0 2px rgba(0,0,0,0.25);
}

td{
  text-align            : right;
  font-feature-settings : 'onum','tnum';
}

nav{
  position   : fixed;
  top        : 0;
  left       : 0;
  width      : 100%;
  background : #222;
  color      : #fff;
}

nav > div{
  max-width : 36em;
  margin    : 0 auto;
  padding   : 1em;
}

.twitter{
  display         : block;
  float           : right;
  width           : 1.5em;
  height          : 1.2em;
  margin-left     : 1em;
  background      : url('images/twitter-icon.svg') no-repeat;
  background-size : cover;
}

.twitter > span{
  display : none;
}

footer{
  background : #222;
}

footer > div{
  margin     : 0 auto;
  padding    : 1em ;
  background : #222;
  color      : #fff;
  text-align : center;
}