body {
	font-family: "Bellefair", serif;
	color: #5A3426;
	font-size: 1.25em;
	line-height: 1.5;
	justify-self: center;
	width: 100%;
	background-color: #CDDAD5;
}

/* --- Responsive Sidebar navigation adapted from W3.CSS Templates --- */
.w3-bar-block {
	display: flex;
	justify-content: left;
	padding-top: 5em;
	display: none;
	z-index: 2;
	width: 20%;
	min-width: 300px
}

.w3-bar-item {
	padding: 8px;
	width: auto;
	border: none;
	display: block;
	outline: 0;
	width: 100%;
	white-space: normal;
	font-size: 1.5em;
	/*  Menu items font size  */
}

.w3-bar {
	width: 100%;
	overflow: hidden
}

.w3-top,
.w3-bottom {
	position: fixed;
	width: 100%;
	z-index: 1
}

.w3-top {
	top: 0;
	font-size: 48px;
	/* Hamburger bars size */
}

.w3-card {
	box-shadow: 0 2px 5px 0 rgba(188, 108, 37, 0.16), 0 2px 10px 0 rgba(188, 108, 37, 0.12)
}

.w3-sidebar {
	height: 100%;
	width: 200px;
	background-color: #F7F8F8;
	position: fixed !important;
	z-index: 1;
	overflow: auto;
}

.w3-animate-left {
	position: relative;
	animation: animateleft 0.4s;
}

@keyframes animateleft {
	from {
		left: -300px;
		opacity: 0
	}

	to {
		left: 0;
		opacity: 1
	}
}

/* The @keyframes CSS at-rule controls the intermediate steps in a CSS animation
sequence by defining styles for keyframes (or waypoints) along the animation
sequence. */

.w3-button {
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: #5A3426;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap
}

.w3-button {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.w3-button:disabled {
	cursor: not-allowed;
	opacity: 0.3
}

/* --- Typographical Scales --- */

/* Viewport is the browser window size. 1vw = 1% of viewport width. */
header h1 {
	/* 64px is 3.333%  of 1920px */
	font-size: 1.95em;
}

header h2 {
	/* 40px is 2.083%  of 1920px */
	font-size: 1.25em;
}

.shine {
	/*  Call to action color  */
	color: #CDDAD5;
}

h1, h2, h3 {
	font-family: "Gabriela", serif;
	color: #5A3426;
	line-height: 1.5;
}

h2 {
	font-size: 1.56em;
}

h3 {
	font-size: 1.25em;
}

p {
	margin-bottom: 1em;
	max-width: 60ch;
}

a:link {
	color: #AD2B00;
	text-decoration: none;
}

a:hover, a:active, a:visited{
	text-decoration: underline;
	color: #076B00;
}

/* layout */

nav {
	background-color: #F7F8F8;
	width: 100%;
}

.w3-bar-item:link, .w3-bar-item:visited {
	color: #3D4224;
	text-decoration: none;
}

.w3-bar-item:hover, .w3-bar-item:active {
	color: #282B17;
	text-decoration: underline;
}

header {
	margin-top: 80px;
	/* Space for the nav on page load */
}

/*  Places the content image in the bg with the headings on top  */
.header-bg-wrap {
	overflow: hidden;
	position: relative;
}

.header-bg-image img {
	opacity: 0.25;
	/*The opacity property specifies the opacity/transparency of an element.*/
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}

.header-content {
	/* Roughly 500px of 1080px high screen */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

main, .bg-container, .header-content {
	margin: 2em 3em;
}

main {
	overflow: hidden;
	max-width: 1200px;
	justify-self: center;
}

.content {
	margin-left: auto;
	margin-right: auto;
}

.advert {
	justify-self: center;
	padding: 2em 0;
	width: 100%;
}

.recipe p, .recipe li {
	max-width: 80ch;
}

.recipe {
	max-width: 80ch;
	justify-self: center;
}

.post h3 {
	padding-bottom: 1em;
}

article {
	padding: 2em 0;
}

article picture {
	border: none;
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px 7px #777;
}

picture img {
	width: 100%;
}

.image-container {
	padding-bottom: 2em;
}

footer {
	padding: 2em 0 4em 0;
	margin-top: 1em;
	background-color: #58342C;
	justify-items: center;

}

footer h2{ 
	color: #CDDAD5;
}

footer p {
	max-width: 80ch;
	color: #CDDAD5;
}

footer ol {
	text-align: center;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0;

}

footer li a {
	font-size: 1em;
	color: #CDDAD5;
}

footer ol li {
	margin: 10px;
	display: block;
	/*Makes the li selectable up the to the edge of the margins*/
}

footer a:link, footer a:visited {
	color: #D1D7B7;
	text-decoration: none;
}

footer a:hover, footer a:active {
	color: #F7F8F8;
	text-decoration: underline;
}

/* -- Code for the Cookie Compliance popover window -- */

#cookiePopup {
	background-color: #F7F8F8;
	position: fixed;
	top: 15%;
	left: 5%;
	font-size: 14px;
	max-width: 60ch;
	box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
	font-family: "Poppins", sans-serif;
	text-align: justify;
	line-height: 1.8em;
	margin: 0 auto;
	padding: 2em 1.4em;
	border-radius: 6px;
	transition: all 0.5s ease-in-out;
}

#cookiePopup p {
	text-align: center;
	margin: 1.4em 0;
}

#cookiePopup button {
	background-color: #5A3426;
	border: none;
	color: #CDDAD5;
	font-size: 1.2em;
	padding: 1em 1.4em;
	display: block;
	position: relative;
	margin: auto;
	border-radius: 5px;
}

#cookiePopup a {
	color: #076B00;
}

.hide {
	visibility: hidden;

}

.show {
	visibility: visible;

}

/* -- End of Code for the Cookie Compliance popover window -- */

@media only screen and (min-width:768px) {
	main {
		margin: 2em 4em;
	}

	#cookiePopup {
		top: 5%;
		left: 25%
	}

	nav {
		width: 40%;
	}

	.outer-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.inner-container {
		width: 48%;
	}

	.w3-bar-item {
		font-size: 1em;
	}

}

@media only screen and (min-width:1024px) {
	.long img {
		width: 70%;
		justify-self: center;
	}

	.square img {
		width: 30%;
		justify-self: center;
	}

	main {
		margin: 4em 8em;
	}

	.hamburger-position {
		margin-left: 5%;
	}

	h2 {
		font-size: 3.05em;
	}

	h3 {
		font-size: 2.44em;
	}

	header h1 {
		/* 64px is 3.333%  of 1920px */
		padding-top: 1em;
		font-size: 3.82rem;
	}

	header h2 {
		/* 40ƒ=px is 2.083%  of 1920px */
		font-size: 1.95em;
	}

}