@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;
}

#nav {
	height: 60px;
}

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

#description {
	display: grid;
	grid-template-columns: 50% 50%;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

#firediv {
	position: relative;
	margin: 20px;
}

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

#productsdiv {
	display: grid;
	grid-template-columns: auto 50% auto;
	height: 60px;
	padding: 20px;
}

#productslink{
	grid-column-start: 2;
	text-align: center;
	width: 100%;
	height: 100%;
	background-color: #C98244;
	text-decoration: none;
	display: inline-block;
	position: relative;
}

#productslink div {
	font-size: 36px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-decoration: none;
	vertical-align: middle;
	line-height: 60px;
	color: black;
}


#productslink:after {
	content: "";
	position: absolute;
	border-top: 20px solid #C98244;
	border-left: 20px solid #E5C3A0;
	border-right: 20px solid #E5C3A0;
	margin: 0px 20px;
	left: -20px; right: -20px;
}

#productslink:before {
	content: "";
	position: absolute;
	border-bottom: 20px solid #C98244;
	border-left: 20px solid #E5C3A0;
	border-right: 20px solid #E5C3A0;
	margin: 0px 20px;
	left: -20px; right: -20px;
	top: -20px;
}

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

#productslink:hover::after {
	border-top-color: saddlebrown;
}

#productslink:hover::before {
	border-bottom-color: saddlebrown;
}

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

footer p {
	font-size: 10px;
}

/*
#firediv:after {
	content: "";
	position: absolute;
	border-top: 40px solid transparent;
	border-left: 40px solid beige;
	border-right: 40px solid beige;
	left: -20px;
	right: -20px;
	bottom: -20px;
	margin: 0px 20px;
}

#firediv:before {
	content: "";
	position: absolute;
	border-bottom: 40px solid transparent;
	border-left: 40px solid beige;
	border-right: 40px solid beige;
	left: -20px;
	right: -20px;
	top: -20px;
	margin: 0px 20px;
}

#testdiv {
	background-color: red;
	height: 300px;
	width: 500px;
	position: relative;
	display: inline-block;
}

#testdiv:before {
	content: "";
	position: absolute;
	border-top: 80px solid transparent;
	border-left: 80px solid white;
	border-right: 80px solid white;
	left: 0;
	right: 0;
	bottom: 0;
}

#testdiv:after {
	content: "";
	position: absolute;
	border-bottom: 80px solid transparent;
	border-left: 80px solid white;
	border-right: 80px solid white;
	left: 0;
	right: 0;
}

*/