* { box-sizing: border-box; }
body { 
  font-family: Avenir, Arial, sans-serif; 
  display: flex; 
}
a#codepen { 
  display: block; 
  text-decoration: none; 
  color: #fff;  
  margin: 0 auto;
  border-radius: 5px; 
  padding: 2rem;
  padding-left: 7rem;
  font-size: 1.3rem;
  width: 500px;
  border: 1px solid transparent;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/codepen-fill-white.svg) #000 no-repeat;
  background-size: 80% 80%;
  background-position: -150% 50%;
}
a#codepen:hover, a#codepen:hover {
  background-color: #fff;
  color: #000;
  background-blend-mode: difference;
  border: 1px solid #666;
}
nav a { 
  display: inline-block;
  width: 100px; height: 100px;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  filter: contrast(0); 
}
nav a[href="search.php"] { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/search.svg); 
}
nav a[href*="twitter"] { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/twitter.svg); 
}
nav a[href="archive.php"] { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calendar.svg); 
}
nav a[href="?reverse"] { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/reverse.svg); 
}
nav a[href="feed.php"] { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rss.svg); 
}
nav a:hover { filter: none; filter: contrast(1); }