<div class="container">
  <div class="avery">
    <div class="star-spin"></div>
    <div id="overlay"><img src="https://agbales.github.io/new-yorker-avery/images/avery.png"></div>
    <div id="spacer-top"></div>
    <div id="spacer-right"></div>
    <div id="spacer-left"></div>
  </div>
  
  <div class="credit">
    ILLUSTRATION BY SIMON PRADES
  </div>
  
  <div class="text">
    A<i>rgosy</i> began in 1882 as a magazine for children and ceased publication ninety-six years later as soft-core porn for men, but for ten years in between it was the home of a true-crime column by Erle Stanley Gardner, the man who gave the world Perry Mason. In eighty-two novels, six films, and nearly three hundred television episodes, Mason, a criminal-defense lawyer, took on seemingly guilty clients and proved their innocence. In the magazine, Gardner, who had practiced law before turning to writing, attempted to do something similar—except that there his “clients” were real people, already convicted and behind bars. All of them met the same criteria: they were impoverished, they insisted that they were blameless, they were serving life sentences for serious crimes, and they had exhausted their legal options. Gardner called his column “The Court of Last Resort.”<a href="http://www.newyorker.com/magazine/2016/01/25/dead-certainty" target="_blank">Read Article</a>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Kanit:700,300);

@import url(https://fonts.googleapis.com/css?family=EB+Garamond);

body {
  background-color: #fff;
  margin: 50px;
}

a {
  text-decoration: none;  
  color: #446CB3;
  margin: 0px 5px;
}

.avery {
  float: left;
  height: 500px;
  width: 355px;
  margin: 0px 90px 50px 0px;
  background-color: #22313F;
}

.avery img {
  height: 500px;
}

.container {
  max-width: 1200px;
}

.credit {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Kanit', sans-serif;  
  font-size: 1.2em;
  font-weight: 300;
  color: #777;
  line-height: 1.5em;
  margin: 560px 50px;
}

#overlay {
 position: absolute;
 top: 0;
 left: 0;
 margin: 50px;
 z-index: 3;
}

#spacer-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background-color: #fff;
  margin: -20px 0px;
}

#spacer-right {
  position: absolute;
  top: 0;
  left: 0;
  height: 550px;
  width: 90px;
  background-color: #fff;
  margin: 50px 405px;
}

#spacer-left {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50px;
  background-color: #fff;
  margin: 0px;
}

.star-spin {
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/387928/star-background.jpg);
  margin: -50px -60px;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
  -webkit-filter: brightness(.7);
  -moz-filter: brightness(.7);
  -o-filter: brightness(.7);
  -ms-filter: brightness(.7);
  filter: brightness(.7);
  -webkit-animation: spin 38s linear infinite;
  -moz-animation: spin 38s linear infinite;
  -ms-animation: spin 38s linear infinite;
  animation: spin 38s linear infinite;
}

.text {
  font-family: 'EB Garamond', serif;
  font-size: 1.4em;
  text-align: justify;
  line-height: 1.7em;
  max-width: 1100px;
  margin: 25px 0px;
}

.text::first-letter {
  font-family: 'Kanit', sans-serif;
  font-size: 6em;
  font-weight: 700;
  float: left;  
  line-height: 80px; 
  padding: 20px 10px 0px 0px;
}

@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

/*
Inspired by:

"Dead Certainty:
How 'Making a Murderer' goes wrong."
By Kathryn Schulz

Illustration: Simon Prades

The New Yorker: http://www.newyorker.com/magazine/2016/01/25/dead-certainty

*/