@charset "utf-8";

body {
	display: grid;
	grid-template-columns: 20% 60% 20%;
	background-color: peachpuff;
}


h1 {	
	font-size: 92px;
	margin: 20px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

#bannerlink {
	display: block;
	background-color: #C98244;
	height: 100%;
	border-radius: 4px;
	margin: 20px;
}

#bannerlink:hover {
	background-color: saddlebrown;
}

#nav {
	height: 60px;
}

#content {
	grid-column-start: 2;
	background-color:#E5C3A0;
	border-radius: 16px;
}

p {
	font-size: 20px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}

#productcontainer {
	display: grid;
	grid-template-columns: 15% 70% 15%;
}

#contentwrapper {
	grid-column-start: 2;
}

#phpcontent {
	grid-column-start: 2;
	font-size: 48px;
	margin: 16px;
}

.contentbox {
	display: grid;
	grid-template-columns: 35% 40% 25%;
	margin: 10px;
	padding: 8px;
	border: 4px solid #C98244;
	border-radius: 1%;
}

.contentbox img {
	max-width: 90%;
	height: auto;
	padding: 12px;
	border-radius: 6%;
}

form {
	margin: 6px;
	padding: 6px;
	display: grid;
	grid-template-columns: 60% 40%;
	grid-template-rows: 30% 70%;
	
}

label, input {
	padding: 12px;
	font-size: 20px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

input[type="submit"] {
	padding: 16px;
	background-color: #C98244;
	border: 2px solid #C98244;
	border-radius: 100%;
	grid-column-end: 3;
	grid-column-start: 1;
	font-size: 36px;
	white-space: normal;
}

input[type="submit"]:hover {
	background-color: saddlebrown;
}

input[type="number"] {
	font-size: 16px;
	width: 40%;
	height: 40%;
	background-color: peachpuff;
	border: 2px solid #C98244;
	border-radius: 20%;
	padding: 4px;
	-moz-appearance: textfield;
}

footer {
	border-top: 12px solid #C98244;
}

footer p {
	font-size: 10px;
	margin: 20px;
	padding: 0px;
}