/*RIP #9C6615*/
*{
	font-family: "blanket";
	font-size: 16px;
	color: #363636;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}
body{
	background-color: white;
	background-image: url(../img/bg.jpeg) ;
	/*https://www.freepik.com/free-photo/chocolate-spices-isolated-white_7249445.htm#fromView=search&page=1&position=14&uuid=e6d475de-b894-4f79-87fd-4a30fc078c36&query=chocolate*/
	background-repeat: no-repeat;
	background-position: center top;
}

.skip-link{
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	color: #DFBBB1;
}
.skip-link:focus{
	position: static;
	width: auto;
	height: auto;
}

.wrapper{
	max-width: 1000px;
	min-height: 100vh;
	margin: 0 auto;
	background-color: #DFBBB1;
	
	display: grid;
	grid-template-areas:
		"banner"
		"menu"
		"content"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: 100px 50px minmax(100px, auto) 100px;
}

/*----------------------------------------Header----------------------------------------*/
	header{
		background-color: #363636;
		
		grid-area: banner;
		
		display: grid;
		grid-template-areas:
			"logo page page";
		grid-template-columns: repeat(3, 1fr);

	}
	header img{
		padding-left: 0.1em;
		grid-area: logo;
		float: left;
		margin: 0;
	}
	header h1{
		grid-area: page;
		font-family: "parkside";
		color: #C69638;
		font-size: 4em;
		text-align: right;
		padding: 0 1em 0 0;
	}

/*----------------------------------------Nav----------------------------------------*/
	nav{
		grid-area: menu;
		background-color: #C79627;
		width: 100%;
		height: 50px;
		

	}
	nav ul{
		width: 100%;
		list-style: none;
		
		
		display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-around;
	}
	nav a{
		font-size: 2em;
		color: #363636;
		text-decoration: none;
		display: block;
		padding: 0.3em 0.6em 1em 0.6em
	}
	nav a:hover{
		color: #DFBBB1;
		background: #363636;
		font-weight: bold;
	}

/*----------------------------------------Footer----------------------------------------*/
	footer{
		background-color: #363636;
		padding: 0.5em;
		
			grid-area: footer;

		display: grid;
		grid-template-areas:
			"column1 column2 column3";
		grid-template-columns: repeat(3, 1fr);
		gap: 1em;
	}
	footer ul, footer section{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	footer ul li, footer section p{
		font-size: 1.1em;
		color: #C69638;
	}
	footer ul li a, footer section p a{
		font-size: 1.1em;
		text-decoration: none;
		display: block;
		width: 85px;
		color: #C69638;
		padding-left: 2%;
	}
	footer ul li a:hover, footer section p a:hover{
		color: #363636;
		background-color: #DFBBB1;
	}
	#footercolumn1{
		grid-area: column1;
	}
	#footercolumn2 section{
		grid-area: column2;
	}
	#footercolumn3{
		grid-area: column3;
	}
	#footercolumn3 ul li a{
		margin-bottom: 0.5em;
		width: 100px;
	}

/*----------------------------------------Home Page----------------------------------------*/
	#homepage{
		background-color: #DFBBB1;
		background-image: url(../img/home-bg.jpeg);
		/*https://www.freepik.com/free-photo/chocolate-pieces-truffles_6123488.htm#fromView=search&page=1&position=4&uuid=e6d475de-b894-4f79-87fd-4a30fc078c36&query=chocolate*/
		background-position: center;
		max-width: 100%;
		min-height: auto;
		padding: 50px;
		
		grid-area: content;
		
		display: grid;
		
		grid-template-areas:
			"empty text empty2";
		grid-template-columns: repeat(3, 1fr);
	}
	#homepage #homeborder{
		grid-area: text;
		background: #DFBBB1;
		padding: 1em;
	}
	#homepage #intro{
		background: #363636;
		padding: 1em;
	}
	#homepage #intro h2{
		text-align: center;
		font-size: 3em;
		margin-bottom: 0.5em;
		color: #DFBBB1;
		font-family: "parkside";
	}
	#homepage #intro p{
		text-align: center;
		font-size: 2.5em;
		color: #DFBBB1;
	}
	
/*----------------------------------------Bakers Page----------------------------------------*/
	#bakerspage{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;
		
		grid-area: content;
		
		display: grid;
		grid-template-areas:
			"headerbaker"
			"bigsmlbaker";
		grid-template-rows: 4em auto;
	}
	#bakerspage #bakerheader{
		
		grid-area: headerbaker;
	}
	#bakerspage #bakerheader h2{
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#bakerspage #bakerbigsml{
		
		grid-area: bigsmlbaker;
		
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: initial;
	}
	#bakerspage #bakerbigsml img{
		max-width: 100%;
	}
	#bakerspage #bakersmall{
		display: none;
	}
	#bakerspage #bakerbigsml .teammember{
		background: #363636;
		margin-bottom: 1em;
		margin-top: 1em;
		padding: 1em;
	}
	#bakerspage #bakerbigsml .teammember p{
		font-size: 2em;
		color: #DFBBB1;
	}
	
/*----------------------------------------Lamingtons Page----------------------------------------*/
	#lamingpage{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;
		
		grid-area: content;
		
		display: grid;
		grid-template-areas:
			"lamheader"
			"lamproduct";
		grid-template-rows: 5em auto;
	}
	#lamingpage #lamhead{
		grid-area: lamheader;
	}
	
	#lamingpage #lamcards{
		grid-area: lamproduct;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	#lamingpage #lamhead h2{
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#lamingpage #lamhead p{
		text-align: center;
		font-size:2em;
		color: #363636;
	}
	#lamingpage #lamcards .lamcard{
		background: #363636;
		width: 16.5em;
		height:22em;
		padding: 1em;
		margin: 1em;
	}
	#lamingpage #lamcards .lamcard p{
		font-size: 2em;
		color: #DFBBB1;
	}
	
/*----------------------------------------Teas Page----------------------------------------*/
	#teapage{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;
		
		grid-area: content;
		
		display: grid;
		grid-template-areas:
			"teaheader"
			"teaproduct";
		grid-template-rows: 5em auto;
	}
	#teapage #teahead{
		grid-area: teaheader;
	}
	
	#teapage #teacards{
		grid-area: teaproduct;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	#teapage #teahead h2{
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#teapage #teahead p{
		text-align: center;
		font-size:2em;
		color: #363636;
	}
	#teapage #teacards .teacard{
		background: #363636;
		width: 16.5em;
		height:22em;
		padding: 1em;
		margin: 1em;
	}
	#teapage #teacards .teacard p{
		font-size: 2em;
		color: #DFBBB1;
	}
	
/*----------------------------------------Cart Page----------------------------------------*/
	/*--------------------------Cart Top--------------------------*/
	#cartpage{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;
		
		grid-area: content;
				
		display: grid;
		grid-template-areas:
			"headercart"
			"topbottomcart";
		grid-template-rows: 3em auto;
		gap: 1em;
	}	
	#cartpage #cartheader{
		grid-area: headercart;
	}
	#cartpage #cartheader h2{	
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#cartpage #carttopbottom{
		grid-area: topbottomcart;
		
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: initial;
	}
	#cartpage #carttop{
		margin-top: 1em;
		height: 23em;
		
		display: grid;
		grid-template-areas:
			"cardcart detailscart";
		grid-template-columns: 17.5em auto;
		gap: 1em;
	}
	#cartpage #carttop #cartcard{
		background-color: #363636;
		
		grid-area: cardcart;
	}
	#cartpage #carttop #cartcard #cartteacard{
		padding: 0.5em;
		margin: 1em;
	}
	#cartpage #carttop #cartcard #cartteacard p{
		font-size: 2em;
		color: #DFBBB1;
	}
	#cartpage #carttop #cartdetails{
		grid-area: detailscart;
		
		display: grid;
		grid-template-areas:
			"textcart" 
			"tablecart";
		grid-template-rows: 15em auto;
		gap: 1em;
	}
	#cartpage #carttop #cartdetails #carttext{
		padding: 1em;
		background-color: #363636;
		
		grid-area: textcart;
	}
	#cartpage #carttop #cartdetails #carttext p{
		margin-bottom: 0.2em;
		font-size: 2em;
		color: #DFBBB1;
	}
	#cartpage #carttop #cartdetails #carttoptable{
		background-color: #363636;
		padding: 1em;
		
		grid-area: tablecart;
		
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: initial;
	}
	#cartpage #carttop #cartdetails #carttoptable table{
		width: 50%;

		border-collapse: collapse;
	}
	#cartpage #carttop #cartdetails #carttoptable table td{
		border: 2px #DFBBB1 solid;
		font-size: 2em;
		color: #DFBBB1;
		text-align: center;
		
	}
	#cartpage #carttop #cartdetails #carttoptable #tableqty{
		margin-right: 1em;
	}
	#cartpage #carttop #cartdetails #carttoptable #tableprice{
		margin-left: 1em;
	}
	#cartpage #carttop #cartdetails #carttoptable th{
		border: 2px #DFBBB1 solid;
		background-color: #DFBBB1;
		font-size: 2em;
		color:#363636;
		text-align: center;
	}	
	#cartpage #carttop #cartdetails #carttoptable caption{
		font-size: 2em;
		color: #DFBBB1;
		text-align: center;
	}	
	
	/*--------------------------Cart Bottom--------------------------*/
	#cartpage #cartbottom{
		margin-top: 2em;
		height: 20em;
		background-color: #363636;
		
		display: grid;
		grid-template-areas:
			"leftcart rightcart";
		grid-template-columns: 50% 50%;

	}
	#cartpage #cartbottom #cartleft{
		padding: 0.5em;
		
		grid-area: leftcart;
		
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: initial;
	}
	#cartpage #cartbottom #cartleft .buttonborder{
		padding: 0.5em;
		height: 100%;
		margin: 0.5em;
		background-color: #DFBBB1;
		
	}
	#cartpage #cartbottom #cartleft .deleverybutton{
		height: 100%;
		background-color: #363636;
	}
	#cartpage #cartbottom #cartleft .deleverybutton:hover, #cartpage #cartbottom #cartleft .deleverybutton h3:hover{
		background-color: #DFBBB1;
		color: #363636;
	}
	#cartpage #cartbottom #cartleft .deleverybutton h3{
		height: 100%;
		text-align: center;
		font-size: 3em;
		color: #DFBBB1;
		font-family: "parkside";
		display: block;
	}
	#cartpage #cartbottom #cartright{
		padding: 0.5em;
		
		grid-area: rightcart;
		
		display: grid;
		grid-template-areas:
			"codecart" 
			"checkoutcart";
		grid-template-rows: 50% 50%;
	}
	#cartpage #cartbottom #cartright #cartcode{
		grid-area: codecart;
	}
	#cartpage #cartbottom #cartright #checkout{
		grid-area: checkoutcart;
	}
	#cartpage #cartbottom #cartright #checkout #checkborder{
		height: 70%;
		padding: 0.5em;
		margin: 0.5em;
		background-color: #DFBBB1;
		
	}
	#cartpage #cartbottom #cartright #checkout #checkbutton{
		height: 100%;
		background-color: #363636;
	}
	#cartpage #cartbottom #cartright #checkout #checkbutton:hover, #cartpage #cartbottom #cartright #checkout #checkbutton a:hover{
		background-color: #DFBBB1;
		color: #363636;
	}
	#cartpage #cartbottom #cartright #checkout #checkbutton a{
		height: 100%;
		text-align: center;
		font-size: 3em;
		color: #DFBBB1;
		font-family: "parkside";
		display: block;
		text-decoration: none;
	}
	#cartpage #cartbottom #cartright #cartcode #bordercode{
		margin: 0.5em;
		margin-top: 2em;
		padding: 0.5em;
		background-color: #DFBBB1;
		
	}
	#cartpage #cartbottom #cartright #cartcode form{
		padding: 0.5em;
		width: 100%;
		background-color: #363636;
	}
	#cartpage #cartbottom #cartright #cartcode fieldset{
		border: none;
		
	}
	#cartpage #cartbottom #cartright #cartcode legend{
		font-size: 2em;
		color: #DFBBB1;	
		
	}
	#cartpage #cartbottom #cartright #cartcode label{
		font-size: 2em;
		color: #DFBBB1;
		
	}
	#cartpage #cartbottom #cartright #cartcode input{
		width: 80%;
		background-color: #DFBBB1;
		font-size: 2em;
		color: #363636;
		text-align: center;
		margin-left: 0.5em;
	}
	/*----------------------------------------Checkout Page----------------------------------------*/
	#checkoutpage{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;

		grid-area: content;
		
		display: grid;
		grid-template-areas:
			"checkoutheader"
			"checkoutform";
		grid-template-rows: 4em auto;
		gap: 1em;
	}
	#ckeckoutpage #checkouthead{
		grid-area: checkoutheader;
	}
	#checkoutpage #checkouthead h2{
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#checkoutpage #checkoutform{
		grid-area: checkoutform;
		background: #363636;
		padding: 1em;

	}
	#checkoutpage #checkoutform form{
		background: #DFBBB1;
		padding: 0.5em;
	}
	#checkoutpage #checkoutform fieldset{
		border: none;
		background: #363636;
		padding: 1em;
	}
	#checkoutpage #checkoutform label, #checkoutpage #checkoutform legend{

		color: #DFBBB1;
	}
	#checkoutpage #checkoutform p{
		font-size: 1.5em;
		color: #DFBBB1;
		text-align: center;
		margin-bottom: 1em;
	}
	#checkoutpage #checkoutform div {
		clear: both;
	}
	#checkoutpage #checkoutform .two label{
		font-size: 2em;
		float: left;
		width: 180px;
		text-align: right;
		padding-right: 10px;
		padding-top: 0.25em;
		position: relative;
	}	
	#checkoutpage #checkoutform  .two input, #checkoutpage #checkoutform .two select{
		float: left;
		width: 150px;
		text-align: left;
		margin-bottom: 1em;
		margin-top: 1em;
	}
	#checkoutpage #checkoutform .one {
		text-align: center;
		color: #C69638;
	}
	#checkoutpage #checkoutform .one label{
		font-size: 1.5em;
	}
	#checkoutpage #checkoutform #submit{
		margin-top: 0.2em;
		font-size: 3em;
		font-family: "parkside";
		width: 5.5em;
		height: 1.7em;
		color: #C69638;
		background: #363636;
		border-color: #C69638;
		border-width: 10px;
	}
	#checkoutpage #checkoutform .tooltip {
		display: block; 
		position: absolute; 
		visibility: hidden;
		left: 22em;
		top: 1em; 
		width: 10em;
		padding: 0.5em;
		color: #DFBBB1;
		background-color: #363636;
		border:solid 0.5em #DFBBB1;
	}
	#checkoutpage #checkoutform .error {
		font-style: italic;
		font-size: 1.2em;
		color: #C69638;
	}
	#checkoutpage #checkoutform span.error{
 		display: block;
		padding-left: 1em;
		padding-top: 1em;
	}
/*----------------------------------------Contact Page----------------------------------------*/
	#contactpage{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;

		grid-area: content;
		
		display: grid;
		grid-template-areas:
			"contactheader"
			"contactcontent";
		grid-template-rows: 4em auto;
		gap: 1em;
	}
	#contactpage #contacthead{
		grid-area: contactheader;
	}
	#contactpage #contacthead h2{
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#contactpage #contactwrap{
		max-width: 100%;
		min-height: auto;

		grid-area: contactcontent;
		
		display: grid;
		grid-template-areas:
			"detailscontact formcontact";
		grid-template-columns: 50% 50%;
		gap: 1em;
		
	}
	#contactpage #contactdetails{
		grid-area: detailscontact;
		background-color: #363636;
		padding: 25px;
	}
	#contactpage #contactdetails .vcard p{
		margin-left: 1em;
		margin-bottom: 0.2em;
		font-size: 2em;
		color: #DFBBB1;
	}
	#contactpage #contactdetails .vcard a{
		color: #DFBBB1;
		font-size: 1em;
		text-decoration: none;
		display: block;
		padding-left: 1em;
		margin-bottom: 0.2em;
		font-size: 2em;
		color: #DFBBB1;
	}
	#contactpage #contactdetails .vcard a:hover{
		color: #363636;
		background-color: #DFBBB1;
	}
	#contactpage #contactdetails .vcard h3{
		padding-top: 1em;
		font-size: 2em;
		color: #DFBBB1;
		font-family: "parkside";
	}

	#contactpage #contactdetails .vcard .adr h3{
		padding-top: 0;
	}
	#contactpage #contactform{
		grid-area: formcontact;
		background-color: #363636;
		padding: 25px;
	}
	#contactpage #contactform h3{
		font-size: 2em;
		color: #DFBBB1;
		font-family: "parkside";
	}
	#contactpage #contactform p{
		margin-left: 1em;
		margin-bottom: 0.2em;
		font-size: 2em;
		color: #DFBBB1;
	}
/*----------------------------------------Error 404 Page----------------------------------------*/
	#error404page{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;

		grid-area: content;
		
		display: grid;
		grid-template-areas:
			"error404header"
			"error404content";
		grid-template-rows: 4em auto;
		gap: 1em;
	}
	#error404page #error404heading{
		grid-area: error404header;
	}
	#error404page #error404heading h2{
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#error404page #error404contents{
		max-width: 100%;
		min-height: auto;
		background-color: #363636;
		grid-area: error404content;	
	}
	#error404page #error404contents h3{
		margin-top: 1em;
		text-align: center;
		font-size: 2em;
		color: #DFBBB1;
		font-family: "parkside";
	}

	#error404page #error404contents p{
		margin-bottom: 0.5em;
		margin-top: 0.5em;
		text-align: center;
		font-size: 2em;
		color: #DFBBB1;
	}
	#error404page #error404contents a{
		font-size: 1em;
		color: #DFBBB1;
		text-decoration: none;
		display: block;
		margin-left: 40%;
		margin-right: 40%;
	}
	#error404page #error404contents a:hover{
		color: #363636;
		background: #DFBBB1;
	}
	#error404page #error404contents img{
		padding-left: 50px;
		padding-right: 50px;
		max-width: 100%;
		text-align: center;
	}
	#error404page #error404contents #error404small{
		display: none;
	}
/*----------------------------------------Cheese Page----------------------------------------*/
	#cheesepage{
		background-color: #DFBBB1;
		max-width: 100%;
		min-height: auto;
		padding: 50px;

		grid-area: content;
		
		display: grid;
		grid-template-areas:
			"cheeseheader"
			"cheesecontent";
		grid-template-rows: 4em auto;
		gap: 1em;
	}
	#cheesepage #cheeseheading{
		grid-area: cheeseheader;
	}
	#cheesepage #cheeseheading h2{
		text-align: center;
		font-size: 3em;
		color: #363636;
		font-family: "parkside";
	}
	#cheesepage #cheesecontents{
		max-width: 100%;
		min-height: auto;
		background-color: #363636;
		grid-area: cheesecontent;	
	}
	#cheesepage #cheesecontents p{
		margin-bottom: 0.5em;
		margin-top: 0.5em;
		text-align: center;
		font-size: 2em;
		color: #DFBBB1;
	}
	
/*----------------------------------------Media Page----------------------------------------*/
	@media screen and (max-width: 720px){
	/*----------------------------------------Bakers Page----------------------------------------*/
		#bakerspage #bakerbigsml #bakerbig{
			display: none;
		}
		#bakerspage #bakerbigsml #bakersmall{
			display: initial;
		}
		
	/*----------------------------------------Cart Page----------------------------------------*/
		#cartpage #cartbottom{
			height: 23em;
		}
	/*----------------------------------------Error 404 Page----------------------------------------*/
		#error404page #error404contents #error404big{
			display: none;
		}
		#error404page #error404contents #error404small{
			display: initial;
		}
	}