* {
  	box-sizing: border-box;
	}	

	html, body {
		height:100%;
		width:100%;
	}

	body {
		display:flex;
		flex-direction: column;
		font-family: Helvetica, Arial, sans-serif;
		margin:0;
	}

	a {
		text-decoration: none;
	}

	#development {
		background-color: #ffe68c;
		border-bottom: 1px solid #c8c8c8;
		font-size:100%;
		margin:0;
		padding:0.5em;
		text-align:center;
	}

	#main-nav {
		width:100%;
		border-bottom: 1px solid;
		border-color: rgb(200,200,200);
	}

	#main-nav a:visited, nav a:link {
		color:black;
	}

	#main-nav a:hover {
		color: rgb(0,181,107);
	}

	#main-nav ul {
		display:flex;
		margin:0 auto;
		padding:0;
		/*max-width:1200px;*/
		background-color: white;
		font-size:120%;
	}

	li {
		list-style: none;
		padding:0.5em 1em;
		align-self: center;
	}

	input[type="text"] {
		font-size:100%;
	}

	input[type="number"]:focus {
		outline:none;
	}

	#search-form {
		display:flex;
	}

	#search-li {
		margin-left:auto;
	}

	#logo-li {
		padding:0 0 0 10px;	
	}

	#logo {
		height:3em;
	} 

	#cart-a {
		margin-right:10px;
	}

	@media (max-width:900px) {
		/*stack the list vertically*/
		nav ul {
			flex-direction: column;
			align-items: center;
		}
		#search-li {
			margin:0;
		}
	}

	#content {
		display: flex;
		flex-wrap:wrap;
		flex-grow:1;
		margin: 1em auto 0 auto;
		padding: 0 1em;
		max-width:1200px;
		min-width:0;
	}

	#footer {
		width:100%;
		background-color:rgb(240,240,240);
		padding:1em 0;
		text-align: center;
		margin-top:0;
		font-size:80%;
	}

	#search-input {
		border: 1px solid #c8c8c8;
		border-radius: 0;
		margin:0;
		-webkit-appearance: none;
	}

	#search-button {
		border: 1px solid #c8c8c8;
		border-radius: 0;
		margin:0;
		background-color: #efefef;
	}

	button:focus {
		outline:none;
	}

	.btn-green {
		padding: 0.2em 0.4em;
		border: none;
		background-color: rgb(0,181,107);
		font-size: 120%;
		color: white;
		border-radius: 0.3em;
		margin-left: 0.5em;
	}

	.btn-green:active {
		background-color: rgb(0,191,117);
	}

	select:focus {
		outline: none;
	}