* {word-wrap: break-word; box-sizing: border-box; margin: 0; padding: 0;}
body {overflow-x: 0; background: #101010; color: #c0c0c0; font-family: Lato,"Trebuchet MS",sans-serif; font-size: 100%;}
#wrapper {max-width: 1100px; margin: 0 auto; width: 100%;}
.col, .row {overflow: auto;}
a {text-decoration: none;}
::selection {background: #000; color: #fff;}

aside {background: rgba(0,0,0,.935); position: fixed; top: 0; z-index: 500; width: 100%; color: #808080;}
nav {text-align: center;}
nav a {display: inline-block; padding: .5rem 1rem; color: #808080;} nav a:hover {color: #000;}
nav a:nth-child(1):hover {background: #ff4141;} nav a:nth-child(2):hover {background: #8686c6;} nav a:nth-child(3):hover {background: #e6ca87;} nav a:nth-child(4):hover {background: #00bf00;}
aside,#credits {font-size: .875rem;}

#music {padding: 2rem 0;}
.song {margin-bottom: 1.5rem;}
.lyrics {text-transform: lowercase; font-family: Inconsolata,Consolas,monospace; padding: 0 1rem;}
.lyrics p {line-height: 125%; margin: .5rem 0;}
.lyrics a:hover {color: #fff;} .spade a {color: #ff4141;} .heart a {color: #8686c6;} .diamond a {color: #e6ca87;} .club a {color: #00bf00;}
.null img, .null p {opacity: 0;}

#credits {color: #808080; padding: 1rem; margin-top: 8.5rem; text-align: center;}
#credits a {font-weight: 700; color: #808080;} #credits a:hover {color: #fff;}
#credits span {display: block; margin: .25rem 0;}

@media only screen and (min-width:325px) {
  nav {text-align: left;}

@media only screen and (min-width:450px) {
  .row {overflow: auto;}
  .song {width: 49%; float: left;} .song:nth-child(2) {margin-left: 2%;} .song:nth-child(2) .lyrics {padding: 0 1rem 0 0;}
  
  #credits span {display: inline-block; width: 50%;} #credits span:nth-child(1) {text-align: left;} #credits span:nth-child(2) {text-align: right;}
}

@media only screen and (min-width:700px) {
  #wrapper {overflow: auto;}
  #left {width: 34%; position: fixed; height: 100%; float: left; max-width: 375px;} #right {width: 66%; float: right; padding: 0 1rem;}
  
  aside {position: fixed; width: 2rem; background: #101010; right: 66%; bottom: auto; top: auto;}
  nav a {display: block; padding: .5rem 0; text-align: center;}
  
  #music {padding-top: 35%;}
  .song {max-width: 340px;}
  .lyrics {padding: 0;}
  
  #credits {padding: 1rem 0;}
}

@media only screen and (min-width: 1100px) {
  #left {overflow-x: 0;}
  aside {position: relative; left: 91.5%;}
}

#left {background: url(bg.png) right no-repeat; background-size: cover;}
/*#wrapper
	#left.col
		aside
			nav
	#right.col
		#music
			.row.[suit]
				.song
					.youtube
					.lyrics
    #credits > span
*/

/*http://labnol.org/?p=27941*/
.youtube {position:relative; padding-bottom:56.23%; height:0; overflow:hidden; max-width:100%;}
.youtube iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.youtube img {bottom:0; display:block; left:0; margin:auto; max-width:100%; width:100%; position:absolute; right:0; top:0; height:auto; cursor:pointer;}