* { /* star applies things to every element, sort of like the wild card, eliminating margins and padding and 
set a default font */
	margin:0;
	padding:0;
	font-family:Helvetica, sans-serif;
	-webkit-text-size-adjust:none; /* for iPhone (don't want text to change size when screen adjusted to landscape */
}

.clear {
	clear:both;
}

body {
	width:80%; 
	margin:auto;
}

header {
	height:150px;
}

#site-logo {
		width:50px;
		height:50px;
		float:left;
		margin-top:30px;
		margin-left:10px;
	}

h1 {
	text-align:center;
	margin:auto;
	margin-top:-20px;
	padding-top:50px;
	font-size: 80px;
	font-family:Garamond;
}

#site-desc {
	padding-top:15px;
	padding-bottom:20px;
}

@media (min-width:1000px) {
	header {
		background-color:hsla(200, 32%, 36%, .85);
	}

	h2 {
		margin-top:10px;
		margin-left:10px;
		margin-right:10px;
		padding: 8px;
		border: 4px dotted hsla(200, 32%, 36%, .85);
	}
	
	#recipe {
		height:480px;
		margin-bottom:25px;
		padding:10px;
		background-color:hsla(217, 10%, 47%, .2);
		border-radius:15%;
	}

	
	h3 {
		text-decoration:underline;
		font-size:35px;
		margin-top:30px;
		margin-left:30px;
	}
	
	img {
		width:325px;
		height:325px;
		float:left;
		margin:15px;
	}
	
	p {
		margin-top:20px;
		margin-left:20px;
		font-size:22px;
	}
}

@media (min-width:800px) and (max-width:999px) {
	header {
		background-color:hsla(200, 32%, 36%, .85);
	}
	
	h1 {
		font-size:70px;
	}
	
	h2 {
		margin-top:10px;
		margin-left:10px;
		margin-right:10px;
		padding: 8px;
		border: 4px dotted hsla(200, 32%, 36%, .85);
		font-size:21px;
	}
	
	#recipe {
		height:400px;
		margin-bottom:25px;
		padding:10px;
		background-color:hsla(217, 10%, 47%, .2);
		border-radius:15%;
	}

	
	h3 {
		text-decoration:underline;
		font-size:25px;
		margin-top:30px;
		margin-left:30px;
	}
	
	img{
		width:300px;
		height:300px;
		float:left;
		margin:15px;
	}
	
	p {
		margin-top:20px;
		margin-left:20px;
		font-size:16px;
	}
	

}


@media (min-width:400px) and (max-width:799px){
	header {
		background-color:hsla(200, 32%, 36%, .85);
		height:120px;
	}
	
	
	h1 {
		font-size:50px;
	}
	
	h2 {
		margin-top:10px;
		margin-left:10px;
		margin-right:10px;
		padding: 8px;
		border: 4px dotted hsla(200, 32%, 36%, .85);
		font-size:16px;
	}
	
	#recipe {
		display:flex;
		margin-bottom:25px;
		padding:10px;
		background-color:hsla(217, 10%, 47%, .2);
		border-radius:15%;
	}

	
	h3 {
		text-decoration:underline;
		font-size:20px;
		margin-top:30px;
		margin-left:30px;
	}
	
	
	img{
		width:180px;
		height:180px;
		display:block;
		margin:auto;
		margin-top:10px;
	}
	
	p {
		margin-top:20px;
		margin-left:20px;
		font-size:16px;
	}
	
	#quip {
		text-align:center;
		font-size:15px;
		margin:10px;
		margin-left:15px;
		margin-right:5px;
	}
	
	
	#link {
		font-size:15px;
		text-align:center;
	}
	
	#site-quote {
		display:none;
	}
	
}


@media (max-width:399px){
	header {
		background-color:hsla(200, 32%, 36%, .85);
		margin-top:-20px;
	}
	
	
	h1{
		font-size:35px;
	}
	
	h2 {
		margin-top:10px;
		margin-left:5px;
		margin-right:5px;
		padding: 8px;
		border: 4px dotted hsla(200, 32%, 36%, .85);
		font-size:14px;
	}
	
	#recipe {
		display:flex;
		margin-bottom:25px;
		padding-bottom:8px;
		padding-left:15px;
		background-color:hsla(217, 10%, 47%, .2);
		border-radius:15%;
	}

	
	h3 {
		text-decoration:underline;
		text-align:center;
		marign:auto;
		font-size:18px;
		margin-top:15px;
	}
	
	
	img{
		width:100px;
		height:100px;
		display:block;
		margin:auto;
		margin-top:10px;
		float:left;
	}
	
	p {
		margin-top:20px;
		margin-left:20px;
		font-size:16px;
	}
	
	#quip {
		display:none;
	}
	
	
	#link {
		font-size:16px;
		text-align:center;
		padding-top:20px;
		margin-top:15px;
		margin:auto;
	}
	
	#site-quote {
		display:none;
	}
	
}