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

a:after {
   content: " ▻";
}

a {
   text-decoration: none;
}

a:link {
   color: #7FDBFF;
}

a:visited {
   #color: #B10DC9;
   color: #F012BE;
}

.navbar a {
  color: #7FDBFF;
}

.navbar a:after {
   content: "";
}

html {
  font-family: sans-serif;
  font-size: 62.5%;
  color: #FFFFFF;
  background-color: #222222;
}

body {
  font-size: 1.6rem;
  color: #FFFFFF;
}

blockquote {
   padding: 0 1em;
   color: #2ECC40;
   border-left: 0.25em solid #dfe2e5;
}

header {
  border-bottom: 0.2rem solid #F012BE;
}

nav {
  text-align: right;
  color: #7FDBFF;
}

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

code {
   font-family: monospace;
   color: #01FF70;
}

pre {
   padding: 0 1em;
   border-left: 0.25em solid #3D9970;
}

strong {
   color: #FF4136;
}

em {
   color: #FFDC00;
}

strong>em {
   color: #FF851B;
}

h1 {
  color: #7FDBFF;
  font-size: 2.4rem;
}

h2 {
  color: #7FDBFF;
  font-size: 2rem;
}

h3 {
  color: #7FDBFF;
  font-size: 1em;
}

h3:before {
   content: "◎ ";
}

h2:before {
   content: "◉ ";
}

h1:before {
   content: "◈ ";
}

article .header {
  font-size: 1.4rem;
  font-style: italic;
  color: #AAAAAA;
}

.logo a {
  font-weight: bold;
  font-size: 3.4rem;
  text-decoration: none;
  color: #7FDBFF;
}

.logo a:before {
   content: "◈ ";
}

.logo a:after {
   content: " ◈";
}

@media (max-width: 319px) {
  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;
  }
  nav a {
    display: block;
    line-height: 1.6;
  }
}

@media (min-width: 320px) {
  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;
  }
  nav a {
    display: inline;
    margin: 0 0.6rem;
  }
}

@media (min-width: 640px) {
  body {
    width: 60rem;
    margin: 0 auto;
    padding: 0;
  }
  header {
    margin: 0 0 3rem;
    padding: 1.2rem 0;
  }
  nav {
    margin: 0 auto 3rem;
    text-align: center;
  }
  footer {
    text-align: center;
  }
  .logo {
    text-align: center;
    margin: 1rem auto 3rem;
  }
  nav a {
    display: inline;
    margin: 0 0.6rem;
  }
}