/* ================================= 
  Base Element Styles
==================================== */


body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.row {
	flex: 1;
}



.banner {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}




/* ================================= 
  Restaurant menu Styles
==================================== */



.wrapper {
  width: 80%;
  margin: 1em auto;
  background: #8ab8ea;
  padding: 10px;
  border-radius: 25px;
}

.item-container {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: .25em 1em;

}

.item-details-price {
  display: flex;
  
}

.item-detail {
  background: white;
  font-style: italic;
  margin-top: .5em;
}


.dots {
  margin: 0 1%;
  border-bottom: 2px dotted black;
  flex: 1; 
  height: 25px; 
}

.item-detail,
.dots,
.price {
	margin: 0px 0px 15px 0px;
}

#menunav {
	background: #fff;
  	display: inline-flex;
  	flex-direction: row;
  	flex-wrap: wrap;
  	justify-content: center;
}

#menunav li {
	padding: .5em;
	margin: .5em;

	border-radius: 25px;
	background-color: #ffff99;
}


/*Inline items have a fixed with, and won't change size. Only the div int he middle will*/





/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

	.main-header,
	.main-nav, 
	.row,
	.banner {
		display: flex;
	}

	.main-header {
		flex-direction: column;
		align-items: center;
	}

	.banner {
	display: flex;
	flex-direction: column;
	align-items: center;

}
	
	.row {
		flex-wrap: wrap;
	}

	.primary, 
	.secondary {
		flex: 1;
	}

}

@media (min-width: 1025px) {

	.main-header {
		flex-direction: row;
		justify-content: space-between;
	}

	.banner {
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.logo {

		margin-right: auto;
	}



}