html{
  font-size:62.5%;
  font-family:hack,monospace;
  color:#1a1a1a;
  background:#f8f8f8;
  line-height:1.4
}

body{font-size:1.6rem}

header{border-bottom:0.2rem solid #1a1a1a}

nav{text-align:right}

nav a
{
  font-size:1.8rem;
  font-weight:bold;
  color:#1a1a1a;
  text-decoration:none;
  text-transform:uppercase
}

footer{
  margin-top:3rem;
  padding:1.2rem 0;
  border-top:0.2rem solid #1a1a1a;
  font-size:1.2rem;
  color:#555
}

h1{
  font-size:2.4rem;
  line-height:1}

h2{
  font-size:2rem;
  line-height:1}

article
.header{
  font-size:1.4rem;
  font-style:italic;color:#555}
.logo a{font-weight:bold;color:#1a1a1a;text-decoration:none}

@media (max-width:400px)

{body{width:90%;margin:0;padding:0 5%}
header{margin:4.2rem 0}
nav{margin:0 auto 3rem;text-align:center}
footer{text-align:center}
.logo{text-align:center;
  margin:1rem auto 3rem}

  .logo a{font-size:2.4rem}

nav a{
  display:block;
  line-height:1.6}}

  @media (min-width:640px){
    body{width:90%;margin:0;padding:0 5%}
  header{margin:4.2rem 0}
  nav{margin:0 auto 3rem;text-align:center}
  footer{text-align:center}
  .logo{text-align:center;margin:1rem auto 3rem}
  .logo a{font-size:2.4rem}
  nav a{display:inline;margin:0 0.6rem}}

  @media (min-width:800px)
  {body{width:80rem;margin:0 auto;padding:0}
  header{margin:0 0 3rem;padding:1.2rem 0}
  nav{margin:0;text-align:right}
  nav a{margin:0 0 0 1.2rem;display:inline}
  footer{text-align:right}
  .logo{margin:0;text-align:left}
  .logo a{float:left;font-size:1.8rem}}