/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1.2em;
    line-height: 1.35em;
}




/* "Mobile first" CSS: we'll design for phone sizes first, then add media queries for tablets and desktop computers later */

body {
	background:black;
	color:white;
	margin-top:8%;
	padding-bottom:50px;
	font-family: 'Open Sans', sans-serif;
}

h1,h2 {
	font-family: 'Audiowide', 'Open Sans', sans-serif;
}


#container {
	width: 90%;
	margin:auto;
	max-width:700px;
}

figure {
	margin:1em;
}

img {
	width:100%;
	max-width:600px;
	
}

.final-project {
	border:1px solid white;
	background: rgba(0,0,0,0.4);
	padding:15px;
}





/* =====================
Anders M. Anderson method for responsive media-sharing embeds:
http://amobil.se/2011/11/responsive-embeds/
	====================== */
	
.responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    height: 0;
    overflow: hidden;
}

.responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index:1;
}





/* A better looking default horizontal rule */
hr {
    display: block;
    height: 1px;
    border: 0px;
    border-top: 1px solid #ccc;
    margin: 1em 0px;
    padding: 0px;
}



/* ========================================
MEDIA QUERIES!
======================================== */

/* New CSS for tablet sizes.
You can change the pixel number below */
@media all and (min-width: 768px) {
	
	
	
	
} /* closes 768px+ */




/* New CSS for desktop sizes.
You can change the pixel number below */
@media all and (min-width: 1024px) {
	
	
	
	
} /* closes 1024px+ */