* {
	margin:0; /* better to use a reset like normalize.css */
	padding:0;
	box-sizing:border-box; /* this will make padding and border included in widths - this is best for responsive layouts */
	} 
	
body {
	font-family:sans-serif; /* set the default font for the entire site */
	background-color:#ff0093;
	}
#wrap {
    margin:1em;
    }	


img {max-width:100%;}


header h1{
	background-image: url("images/MFDoom2.jpg");
    background-size: 100%;
	min-height:200px;
	font-family: 'Kalam', cursive;
	text-align:center;
	color:white;
	padding:1em;
	font-size:3em;
	text-transform:uppercase;
	animation-name:animation;
	animation: animation 2s infinite;
	animation-direction:alternate-reverse;
	}

	@keyframes animation { /*use double fancy brackets '{}' the same as media queries */
	0% {color:white;}
	100% {color:cyan;}
	}

	
h2{
	font-family: 'Kalam', cursive;
	text-align:center;
	padding:1em;
	font-size:2em;
	}
	
nav ul {
	display:table;
	width:100%;
	border-collapse:collapse;/*allows doubled up borders to form as one singular border */	
	}
		
nav li {
	display:inline;
	text-decoration:none;
	text-align:center;
	font-family: 'Varela Round', sans-serif;
	font-weight:bold;
	letter-spacing:2px;
	text-transform:lowercase;
	font-size:20px;
	color:white;	
	}
		
nav a {
	display:block; /* this allows the whole "a" tag/link to be clickable */
	width:100%;
	padding:1em;/* this makes link big enough to click on mobile */
	background-color:cyan;
	text-decoration:none;
	}

a:link {	
	color:black;
	}
			
a:visited {
		color:black;
	}
			
a:hover {
	background-color:yellow;
	color:#ff0093;
	font-weight:bold;	
	}
a:active {
	font-weight:bold;
	}
	
.pics{
	padding:1em;
	}

	
.pics div{
	padding:2em;
	}	

#about p{
	font-family: 'Varela Round', sans-serif;
	padding:1em;
	}

#about div{
	padding:1em;
	}

	
footer{
	color:yellow;
	font-family: 'Varela Round', sans-serif;
	}

footer p {
	float:right;
	padding:2em;
	}	
footer a {
	text-align:center;
	display:block; /* this allows the whole "a" tag/link to be clickable */
	width:100%;
	padding:1em;/* this makes link big enough to click on mobile */
	background-color:cyan;
	text-decoration:none;
	}
	
footer a:active {
	background-color:black;
	color:black;
	font-weight:bold;
	letter-spacing:8px;
	}
	
footer a:link {	
	color:black;
	}
			
footer a:visited {
		color:black;
	}
			
footer a:hover {
	background-color:yellow;
	color:#ff0093;
	font-weight:bold;
	
	}
			
footer a:active {
	background-color:black;
	color:white;
	font-weight:bold;
	letter-spacing:8px;
	}

.clearfix {clear:both;} 

/* "#" is an ID. only allowed to use once per page. use class to apply something to more than one element on a page. */


/*-------------MOBILE FIRST METHOD MEDIA QUERIES---------*/

/* all your css for your media queries will style your site when the viewport is less than your first breaking point - in this examples that means 767px wide and smaller. everything styled above this will be styled from 767px or smaller */


/* ---------- SMALL DEVICES AND TABLETS ---------- */
@media only screen and (min-width: 768px){
/* always make sure to NOT end this property with a ';' ^ like above ^ */
	
	body {background-color:black;}
	
	
	#wrap{
		width:70%;
		margin:0 auto;
		max-width:964px;
		}
	
	#about p{
		color:yellow;
		}
	
	nav li{
		display:table-cell;
		}
		
	.desktop {
		display:none;
		}
	
	.pics-header{
		color:yellow;
		}
	
	.about-header{
		color:yellow;
		}
	
	

										
/* ---------- MEDIUM DEVICES, DESKTOPS ---------- */
@media only screen and (min-width: 992px){

	header h1{ 
        font-size:4em;
        letter-spacing:10px;
	}
	
	#about {
		width:40%;
		float:left;
		}

	#pics{
		width:60%;
		float:right;
		}
	#pics div {
		padding:1em;
		margin:0 auto;
		}

	.pics{
		animation-name:images;
		animation-duration:4s;
		animation-timing-function:ease;
		animation-iteration-count:infinite;
		animation-play-state:paused;
		animation-fill-mode:forwards;
		}
	.pics:hover{
		animation-play-state:running;
		}
	
		@keyframes images{
		0% { transform:scale(1);}
		25% {transform:scale(1.1);}
		50% {transform:scale(1.1);}
		100%{transform:scale(1);}	
		}

	.about-header {
		transform:rotate(90deg);
		transform-origin:-190px 220px;
		float:left;
		}
	
	.pics-header{
		transform:rotate(90deg);
		transform-origin:100px 260px;
		float:right;
		}
    }