/** GENERAL **/

	* {
		padding: 0;
		margin: 0;
	}

	body {
		bbackground: #222 none;
		background: #000 url("../pix/bg.png") no-repeat fixed center 70px;
		background-size: auto 80%;
		color: white;
		font-family: 'Open Sans', sans-serif; font-size: 18px;
	}

	p {
		margin: 1em 0 1em 0;
		text-shadow: 2px 2px 1px black;
	}




/** NAVIGATION **/

	header#nav {
		background: black url("../pix/logo.png") no-repeat center top;
		width: 100%;
		height: 100px;
		position: fixed;
		top: 0; left: 0;
		z-index: 10000;
		background-size: auto 100px;
	}
		header#nav nav {
			background-color: transparent;
			font-family: coda;
			font-size: 20px;
			margin: 0 auto 0 auto;
			padding: .25em;
			text-align: center;
		}
			header#nav nav ul {
				padding: 0;
				margin-top: 54px;
			}
				header#nav nav ul li {
					 display: inline-block;
					 text-align: left;
					 color: #c0db67;
				}
					header#nav nav ul li a {
						text-decoration: none;
						color: white;
						padding: 0 .6em;
						position: relative;
						left: -10px;
					}
					header#nav nav ul li a:hover {
						color: #c0db67;
					}




/** VIDEOS - Making them responsive **/

	.youtube-container {
		height: 0;
		bborder: 2px solid black;
		border: none;
		box-shadow: 5px 5px 20px #000;
		margin: 0 auto 30px auto;
		padding-bottom: 56.25%;
		padding-top: 30px;
		position: relative;
		overflow: hidden;
		z-index: 10;
	}
		.youtube-container iframe {
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
		}




/** SECTIONS **/

	article#content {
		bborder: 1px solid red;
		width: 100%;
		max-width: 600px;
		margin: 0 auto 0 auto;
		padding: 0;
		font-size: 18px;
	}

	section {
		margin: 80px auto; /* makes sections clear header */
		text-align: center;
		padding: 0;
	}

	section#music {
		max-width: 500px; 
	}

	section#copyright {
		margin-top: 50vh;
		margin-bottom: 1em;
		font-size: 12px;
	}

	
	section#about {
		text-align: left;
	}

	section#about i {
		font-size: 80%;
	}

	span.title {
		font-weight: bold;
		font-style: italic;
	}

	section a {
		color: #c0db67;
		text-shadow: none;
	}
	section a:hover {
		color: #ff5;
	}

	section#art {
	}

	section#art img {
		max-width: 250px;
		height: auto; /* This makes the images stay proportional */
		width: 100%;
		margin: 10px;
		box-shadow: 0 0 8px rgba(120,120,120, .75);
	}
	section#art img.cd-face { 
		width: 50%;
	}




/** HEADERS **/

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Coda', cursive;
		letter-spacing: auto;
		text-align: center;
		text-shadow: 5px 5px 5px black;
		text-transform: uppercase;
	}

	section h1 {
		font-size: 32px;
		margin: 0 0 .5em 0;
		padding-top: 120px;
		text-align: center;
	}

	section#songs h2 {
		font-family: 'Open Sans', sans-serif;
		text-transform: none;
		font-size: 20px;
		text-align: left;
		font-weight: normal;
		display: none;
	}














/** TESTING **/

@media only screen and (max-width: 800px) {
	
	body {
		bbackground-color: lightblue;
	}
	
	header#nav {
		background: black url("../pix/logo.png") no-repeat center 10px;
		background-size: 100% auto;
		height: 80px;
		
		background: black url("../pix/logo-small.png") no-repeat center 10px;
		background-size: 90% auto;
		height: 140px;
		
		background: black url("../pix/logo-small.png") no-repeat center 10px;
		background-size: auto 90px;
		height: 122px;
	}
	
	header#nav nav {

	}
	
	header#nav nav ul {
		margin-top: 80px;
	}
	
	header#nav nav ul li {
		text-shadow:
			0 -1px 2px black,
			0 -2px 2px black,
			0 -3px 4px black
			;
		font-size: 18px;
	}
	
	section {
		padding: 0 18px 0;
		margin: 0 auto 0 auto;
	}
	section#music {
		padding: 0 50px 0;
	}
	
	section h1 {
		font-size: 24px;
		margin-top: 0;
		padding-top: 150px;
	}
	
	section:first-of-type {
		font-size: 24px;
		margin-top: 0;
		
	}
	
	article#content {
		font-size: 15px;
	}
	
	section#songs h2 {
		display: block;
		display: none;
		font-size: 18px;
		padding: 0 0 .25em .35em;
	}
	
	
	
	section#art img {
		max-width: 75vw;
		height: auto; /* This makes the images stay proportional */
		width: 100%;
		margin: 10px;
		box-shadow: 0 0 8px rgba(120,120,120, .75);
	}
	section#art img.cd-face { 
		width: 50%;
	}
	
	section#bio img {
		width: 94%;
	}
	
	


}