body {
  background: #000;
  color: #999;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0 0 10em 0;
}
span.amp {
    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
    font-size: 110%;
    font-style: italic;
    font-weight: normal;
}    
span.aside {
    font-weight: normal;
}
h1 {
  color: #fff;
  font-size: 3em;
  margin: .3em auto 0 auto;
  font-family: Times New Roman;
  font-weight: bold;
  margin-left: 115px;
  letter-spacing: -.07em;    
}
.blocky {
  font-size: 5em;
  line-height: .75em;
  text-transform: uppercase;
}
.silver {
  color: #fff;
  -webkit-text-stroke: 2px rgba(180, 180, 180, .4);
  text-stroke: 2px rgba(180, 180, 180, .4);
  text-shadow: #fff 1px 1px 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(255,255,255,.6)),
    color-stop(.55, rgba(255,255,255,1)),
    to(rgba(255,255,255,.6))); 
  mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(255,255,255,.6)),
    color-stop(.55, rgba(255,255,255,1)),
    to(rgba(255,255,255,.6))); 
}

p#intro {
  font-family: Georgia;
  font-style: italic;
  color: #999;
  /*margin: .2em 0 2em 123px;*/
  float: right;
  margin-right: 7em;
  margin-top: 4.5em;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  clear: both;
}
li {
  color: #fff;
  margin-bottom: 2px;
  height: 3em;
  overflow: hidden;
  -webkit-perspective: 500;
  -webkit-transition: height .3s, background-size 1s;
  -moz-transition: height .3s;
  background-position: center;
  background-size: 1200%;
  -moz-background-size: 1200%;
  counter-increment: entries;
}
li:hover {
  background-size: 1100%;
  /*-webkit-transform: rotate3d(0,0,1,2deg);*/
}
li:target:hover {
  background-size: 1200%;
}

li:target {
  height: 450px;
}

li .playerdiv {
  clear: left;
  float: left;
  margin: 0 1em 0 7.5em;
}

li div, li .playerdiv { display: none }
li:target div, li:target .playerdiv { display: block }

li h2 {
  background: rgba(50, 50, 50, .5);
  margin: 0;
  padding: 0;
  font-size: 1.5em;
  display: block;
  font-weight: bold;
  letter-spacing: -.04em;    
  line-height: 2em;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  text-shadow: #000 0 0 3px;
  cursor: pointer;
} 
li h2 a {
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
}

li:target h2 a {
  float: left;
  margin-right: 1em;
}
li h2 a.alternate {
  display: none;
}
li:target h2 a.alternate {
  display: block;
  color: #ccc;
  font-weight: normal;
  text-decoration: underline;
}


li h2:before {
  content: counter(entries, decimal);
  display: block;
  float: left;
  color: rgba(0, 0, 0, 0);
  width: 100px;
  margin-right: 20px;
  text-align: right;
  letter-spacing: -.15em;    
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  font-size: 4em;
  text-shadow: #000 0 0 10px;
  opacity: .5;
}
li:target h2:before {
  text-shadow: none;      
}

li:hover h2 {
  background: rgba(0, 0, 0, 0);
}
li:hover h2 a {
  -webkit-transform: scale(1.01, 1.01);
}

li:target h2 {
  cursor: normal;
}

li:target h2, li:target:hover h2 {
  background: none;
}
li:hover h2:before {
  color: rgba(0, 0, 0, 1);
  text-shadow: rgba(0, 0, 0, .2) 0 0 3px;
  font-size: 3em;
  opacity: 1;
}
li:target:hover h2:before {
  color: rgba(0, 0, 0, 0);
  text-shadow: none;
  font-size: 4em;
}

div.player {
  margin-right: 2em;
  margin-left: 120px;
  float: left;
  clear: both;
}

div.lyrics {
  float: left;
  margin-right: 1em;
  padding: 2em 2em 2em 4px;
  font-size: 1.4em;
  white-space: normal;
  overflow-y: auto;
  height: 310px;
  width: 250px; 
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0,0,0,0)),
    color-stop(.1, rgba(0,0,0,1)),
    color-stop(.9, rgba(0,0,0,1)),
    to(rgba(0,0,0,0)));     
  font-family: Arial;
  font-weight: bold;   
  letter-spacing: -.05em;
  white-space: pre-wrap;
  color: #fff;
  position: relative;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .3);
}

div.lyrics div {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: .3;
  text-shadow: rgba(0,0,0,1) 0 0 7px;
}
div.lyrics div.sel {
  opacity: 1;
  text-shadow: rgba(0,0,0,.7) 0 0 7px;
}

text {
	font-family: "Helvetica Neue", arial, sans-serif;
	font-weight: bold;
	fill: white;
	font-size: 65px;
	letter-spacing: -.05em;
}
  
image { mask: url(./#text-mask); }
  
use#outline { stroke: black; stroke-width: 2px; }