/* --------------------- PHONE STYLES --------------------- */

body {
	background-color: #FED8C2;
}

#background {
	background: url(./img/bg.jpg) no-repeat fixed center;
	background-size: cover;
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0px auto;
	transform: translate(0, -10px);
	opacity: 60%;
	z-index: -100;
}


#wrapper {
	/*border: 1px solid blue;*/
	width: 100%;
	max-width: 1000px;
	margin: 0px auto;
    font-family: 'Spartan';
    background-color: #FED8C2;
    padding: 0px;
}

li {
	font-family: 'Roboto';
}

.spartan {
	font-family: 'Spartan';
	font-size: 1.2em;
}

.firstword {
	font-size: 1em;
	font-size: 1em;
}



img {
	width: 100%;
}

header {
	/*border: 1px solid green;*/
	text-align: center;
	margin: 0px 0px 10px 0px;
	padding: 70px 0px;
	background: url(./img/banner.jpg) no-repeat center;
	background-size: cover;
	color: white;
	text-shadow: 2px 2px 2px black;
}

header h1 {
	/*border: 1px solid red;*/
	font-size: 1.2em;
}

header p {
	/*border: 1px solid orange;*/
}



#data {
	/*border: 1px solid purple;*/
	text-align: center;
}


#data ul li {
	/*order: 1px solid red;*/
}

#data ul li span {
	/*border: 1px solid blue;*/
}

.data1 {
	grid-area: data1;
}

.data2 {
	grid-area: data2;
}

.data3 {
	grid-area: data3;
}

.data4 {
	grid-area: data4;
}



#ingredients {
	/*border: 1px solid red;*/
	text-align: center;
	margin: 10px 0px 20px 0px;
	position: relative;
}

#ingredientsbg {
	/*border: 1px solid green;*/
	background: url(img/bg.jpg) no-repeat fixed center;
	background-size: cover;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0px auto;
	opacity: 20%;
	z-index: 1;
}

#ingredients ul {
		display: grid;
		grid-template-columns: 1fr;
	}


#ingredients ul li {
	/*border: 1px solid orange;*/
	z-index: 2;
}

#ingredients ul li span {
	/*border: 1px solid magenta;*/
	color: #A63126;
}



#steps {
	/*border: 1px solid purple;*/
	position: relative;
}

#stepsbg {
	/*border: 1px solid green;*/
	background: url(img/bg.jpg) no-repeat fixed center;
	background-size: cover;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0px auto;
	opacity: 20%;
	z-index: 1;
}

#steps ul {
		display: grid;
		grid-template-columns: 1fr;
	}

#steps ul li {
	/*border: 1px solid red;*/
	margin: 10px;
	padding: 1%;
	z-index: 20;
}

#steps ul li span {
	/*border: 1px solid blue;*/
	color: #A63126;
}

#steps li:first-line {
	text-transform: uppercase;
}



footer {
	/*border: 1px solid green;*/
	margin-top: 10px;
}


a:link, a:visited {
	color: rgb(150,150,255);
	text-decoration: none;
}

a:hover, a:focus {
	color: rgb(120,120,220);
}


	




/* --------------------- SUB STYLES --------------------- */
@media only screen and (min-width: 560px) and (max-width: 585px) {

	header h1 {
	font-size: 1.3em;
}

} /* END SUB STYLE */

/* --------------------- SUB STYLES --------------------- */
@media only screen and (min-width: 586px) {

	header h1 {
	font-size: 1.5em;
}

} /* END SUB STYLE */


/* --------------------- TABLET STYLES --------------------- */
@media only screen and (min-width: 500px) and (max-width: 800px) {

	#data ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "data1 data2"
							 "data3 data4"
	}

	#steps ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	#ingredients ul {
		display: grid;
		grid-template-columns: 1fr;
	}

} /* END TABLET STYLE */


/* --------------------- SUB STYLES --------------------- */
@media only screen and (min-width: 801px) and (max-width: 960px) {

	#data ul {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "data4 data4 data4"
							 "data1 data2 data3"
	}

	.data4 {
		text-align: center;
	}

	#steps ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

} /* END SUB STYLE */


/* --------------------- DESKTOP STYLES --------------------- */
@media only screen and (min-width: 961px) {

		#wrapper {
	/*border: 1px solid blue;*/
	width: 90%;
	max-width: 1000px;
	margin: 10px auto;
    padding: 10px 10px 0px 10px;
}

	#data ul {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas: "data1 data2 data3 data4"
	}

	#steps ul {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: ""
	}

	#ingredients ul {
		display: grid;
		grid-template-columns: 1fr;
	}

} /* END DESKTOP STYLE */