* { margin:0; padding: 0; }

article a { color: #357edd; /* blue */ }
a { color: inherit; }

/* Utilities */
.wispy
{
  color: #777;
  font-size: small;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  word-spacing: 0.2rem;
  font-weight: 100;
}

/* Typography */
h1, h2, h3, h4
{
  font-weight: normal;
}
h3, h4
{
  margin: 1em 0 0.5em;
}

.pager
{
  margin: 1.9rem 0 0 3.7rem;
}
.pager-link
{
  color: #777;
  letter-spacing: 0.1rem;
}

nav
{
  float: right;
  margin: -12rem 1rem 1rem;
  width: 40%;
}

nav, blockquote
{
  border: 1px solid transparent;
}

nav li
{
  letter-spacing: 0.1rem;
  line-height: 1rem;
}

/* Headings */

h1, header h2{
  text-transform: uppercase;
}

header h1
{ 
  font-size: 3.7rem;
  margin: 3.7rem 0 0.6rem 3.7rem;
}
header h2
{
  font-size: 2rem;
  margin: 0 0 3.7rem 3.7rem;
}
article h2
{
  margin-top: 1rem;
  border-bottom: 1px dotted #333;
  width: -moz-fit-content;
  width: fit-content;
}
section h2
{
  border: none;
}

header
{
  padding: 1px;
}

li
{
  margin: 0.5rem 0;
}

/* Article formatting */
article
{
  margin: 3.7rem;
  font-size: 120%;
}
article p
{
  margin: 0.5rem 0 1rem;
}

article ul
{
    margin: 1rem 0;
    padding: 0.3rem 0 0.2rem;
}
article li ul
{
    margin: 0 1rem;
}

article img
{
  max-width: 100%;
}

article p, article li, blockquote, widthy
{
  max-width: 50rem;
}

pre
{
  padding: 1rem;
  margin-bottom: 1.2rem;
  white-space: pre-wrap;
  overflow: hidden;
  display: inline-block;
}
pre, code, blockquote
{
  border-radius: 0.2rem;
}

code
{
  font-family: Consolas, monospace;
  padding: 0.1rem 0.2rem;
  font-size: 0.9em; /* em intended here */
}
pre code
{
  padding: 0;
}

blockquote
{
  background: #eee; /* light-gray */
  border-left: 0.2rem solid #777; /* gray */
  padding: 0.4rem 1rem 0 1rem;
}
.dark blockquote
{
  background: #777; /* light-gray */
  border-left: 0.2rem solid #eee; /* gray */
}
blockquote li 
{ 
  list-style-type: none;
}

table
{
  width: 100%;
  border: 1px solid transparent;
  border-width: 1px 0;
  padding: 1rem 0;
  border-collapse: collapse;
}
td 
{
  border: 1px solid #777;
  padding: 0.2rem;
}

/* Mobiles */
@media (max-width: 767px){

  /* Small, centre title */
  header h1
  {
    margin: 1.9rem auto 0.6rem auto;
    width: 80%;
  }
  header h2
  {
    margin: 0.3rem auto 1.2rem auto;
    width: 80%;
  }

  /* Unfloat nav box */
  nav
  {
    float: none;
    margin: 0;
    width: 100%;
  }
  
  /* Unfloat images and centre them in flow */
  article img
  {
    margin: 1rem auto;
  }
  
  /* Give article text more room */
  article
  {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
    font-size: 100%;
  }
  
  .pager
  {
    margin-left: 1.2rem;
  }
}