body {
	margin: 0;
}

* {
	box-sizing:border-box;
}

#outputArea {
z-index: 8;
position: absolute;
height: 200px;
width: 600px;
margin-left: 20px;
margin-top: 520px;
font-size: 20pt;
background-color: pink;
}


/*styling for all containers*/
.container {
	background-color: powderblue;

	position: absolute;
	width: 50%;
	height: 55%;

	margin-left: 25%;
	margin-top: 5%;


}

.showing{
	z-index: 4;
	display: block;
}

.notShowing{
	z-index: -1;
	display: none;
}

/*styling for just the first page*/
.welcomeClose{
	display: block;
	z-index: 2;
	position: absolute;
	margin-left: 12.5%;

	margin-top:5%;
	width: 75%;
	height: 90%;

}

.welcomeOpen{
	display: block;
	/*opacity: .01;*/
	z-index: 1;
	position: absolute;

	margin-left: 12.5%;
	margin-top:5%;
	width: 75%;
	height: 90%;
}

#openButton{
	opacity: 1;
	position: absolute;
	z-index: 3;

	margin-left: 40%;
	margin-top: 30%;
}

.welcomeClose:hover, .welcomeClose:active{
	/*z-index: 1;*/
	/*display is buggy for this*/
	opacity: 0.01;
}

#openButton:hover + .welcomeClose{
	opacity: 0.01;
}

.welcomeClose:hover + #openButton{
	opacity: 1;
}

/*styling for subsequent pages*/
.noteBack{
	z-index: 0;
	position: absolute;
	margin-left: 12.5%;

	margin-top:5%;
	width: 75%;
	height: 90%;
}

.textContent{
	z-index: 1;
	position: absolute;
	word-wrap: break-word;
	
}

.textHeader{
	position:absolute;
	margin-left:15%;
	margin-top:5%;

}

form{
	position:absolute;
	margin-left:15%;
	margin-top:15%;
}

.ingredientsList{
	margin-top: 20%;
	margin-left: 10%;
	overflow-y: auto;
	height: 65%;
	width: 45%;
}

li{
	list-style-type: none;
	margin: 0px;
	border:1px solid slategray;
	max-width: 100%;
	width: 100%;
	
	word-wrap: break-word;
	padding: 5%;
}

/*Button Styling*/
.navigationBut{
	z-index: 1;
	position:relative;
	left:70%;
	top:75%;
}

.listBut{
	z-index: 1;
	position:absolute;
	margin-left: 50%;
	margin-top: 15%;
}

/*Input Styling*/
.prep{
	width: 15%;
}

/*After the search stylings, for the menu bar*/
.menuBar{
	background-color: lightgray;
	position: sticky;
	z-index: 6;

	width: 100%;
}