:root {
	--StormyTeal-:#16697A;
	--PacficBlue-:#489FB5;
	--SkyBlue-:#82C0CC90;
	--AlabasterGrey-:#EDE7E3;
	--AmberGlow-:#FFA62B;
	--WG-: #F8F8F8;
}
html{
	font-family: "Quicksand", "Avenir Next", system-ui, sans-serif;
	font-size: 110%;
	line-height: 145%;
	margin: 0;
}
header.intro {
	background-color: var(--PacficBlue-);
	padding-bottom: 1em;
}
h1.intro {
	border: solid var(--StormyTeal-) 1vh;
	background-color: var(--AmberGlow-);
	margin-left: 100px ;
	margin-right: 100px ;
	border-radius: 1em;
	padding: 0.5em;
	
}
h2.intro {
	border: solid var(--StormyTeal-) 1vh;
	background-color: var(--AmberGlow-);
	padding: 0.2em;
}

header {
	min-height: 2rem ;
	background-color: var(--PacficBlue-);
	text-align: center; 
	padding-top: 2em;
}

ul.info {
	list-style: none;
	padding: 0;
	background-color: var(--AmberGlow-);
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	text-decoration: none;
}

li.info {
	background-color: var(--AmberGlow-);
}

body {
	background-color: var(--SkyBlue-);
	border-radius: 1em;
	margin: 0;
}

h2{
	text-align: center;
	border: solid var(--StormyTeal-) 1vh;
	margin-left: 200px ;
	margin-right: 200px ;
	border-radius: 1em;
	padding: 0;
	background-color: var(--AmberGlow-);
	
}

li.center-pic {
	display: block;
	margin: 0 auto;
}

.center-pic a{
	display: block;
	width: 100%;
	text-align: center;
}

ul{
	list-style: none;
}

ol.instructions, ul.instructions, ul.ingrediants{
	margin: 0;
	padding: 2em;
	}

p{
	text-align: center;
}

ol, ul{
	padding-left: 0vh;
}
	
img {
	max-width: 50vh;
	margin: 10vh auto;
	padding: 0;
	border-radius: 1em;
	border-style: solid;
	border-width: 3vh;
	border-color: var(--AmberGlow-);
}	

img.wide {
	max-width:50vh;
	margin: 10vh;
	padding: 0;
	border-radius: 1em;
	border-style: solid;
	border-width: 3vh;
	border-color: var(--AmberGlow-);
}

footer {
	background-color: var(--PacficBlue-);
	padding: 3vh;
}
footer.b-up {
	text-align: center;
}

p.warn {
	margin-left: 150px ;
	margin-right: 150px ;
	border-radius: 1em;
	padding: 1;
	background-color: var(--AmberGlow-);
}

img.center-pic {
	margin: 2em auto 0 auto;
	max-width: 35vw;
}

@media (max-width: 550px){
		ul.info {
			list-style: none;
			padding: 2vh;
			background-color: var(--AmberGlow-);
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			text-decoration: none;
			font-size: 115%;
			}
			
		header {
			line-height: 160%;
			margin: 0;	
			min-height: 10vh;		
		}
		
		h1{
			margin: 10vh;
			line-height: 170%;
			font-size: 190%;
		}
		
		main {
			display: flex;
			flex-direction: column;
			margin: 5;
			text-align: center;
			}
		h2{
			border: solid var(--AmberGlow-) 1vh;
			text-align: center;
			padding: 5px;
			margin: 10px;
		}	
		img.wide {
			float: center;
			height: 35vh;
			
			}		
		img.height {
			float: center;
			height: 40vh;
			margin: 0;
			}	
		body{
			margin: 0;
			font-size: 110%;
		}
		ul{
			text-align: center;
			padding: 0;
		}
		
		h1.intro {
			background-color: var(--AmberGlow-);
			border: none;
			margin: 0 auto;
			border-radius: 1em;
			padding: 0.5em;
			text-align: center;
		}
		h2.intro {
			background-color: var(--AmberGlow-);
			border: none;
			margin:  1em 0 auto;
			border-radius: 1em;
			padding: 0.5em;
			text-align: center;
		}
		.center-pic {
	display: block;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
		}
		p.warn {
	margin-left: 150px ;
	margin-right: 150px ;
		border: solid var(--StormyTeal-) 1vh;
	border-radius: 1em;
	padding: 1;
	background-color: var(--AmberGlow-);
}
		img.center-pic {
	margin: 2em auto 1em auto;
	max-width: 80vw;
}
		}