*,
*::before,
*::after {
	box-sizing: border-box;
}

/* General font and color styles */
:root {
	--color-primary: #fff;
	--color-secondary: #252525;
	--color-accent: #0ba39c;

	--ff-nav: 'Arial Black', sans-serif;
	--ff-heading: 'Poller One', cursive;
	--ff-logo: 'Leckerli One', cursive;
	--ff-primary: Arial, Helvetica, sans-serif;
}

/* Conversion format for rem sizes */
html {
	font-size: 62.5%;
}

/* Setting background to white and primary font and size of Arial */
body {
	background: var(--color-primary);
	font-family: var(--ff-primary);
	font-size: 0.9rem;
	line-height: 1;
	padding: 0;
}

/* zero out margins */
body,
h1,
h2,
h3,
p {
	margin: 0;
}

/* Centering content with flexbox in header */
header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 2em;
	padding-bottom: 2.5em;
}

/* Setting width of logo */
header > img {
	width: 400px;
	display: inline;
}
/* Setting h1 font size */
h1 {
	font-size: 2rem;
}

/* Setting h2 font color white and font Poller One. Adjust width to fit text. */
h2 {
	font-family: var(--ff-heading);
	background-color: white;
	font-size: 1.5rem;
	font-weight: 400;
	width: fit-content;
	padding: 0.5em 0.4em 0.5em;
}

/* Setting text to uppercase */
.uppercase {
	text-transform: uppercase;
}

/* ID of navigation section with display of none to hide on window load for mobile and positioned absolute. */
#nav-dropdown {
	position: relative;
	display: none;
	z-index: 1;
}

/* Navigation menu button with img background */
#mobile-navigation {
	background-image: url(../images/mobile-menu.png);
	width: 50px;
	height: 50px;
	margin-top: 2.8em;
}

/* Container for navigation that is positioned absolute center, centers content, defines width with a border color of white */
.nav-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 0;
	padding: 0;
	width: 450px;
	border: 1px solid var(--color-primary);
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	opacity: 0.9;
}

.nav-items {
	list-style: none;
	font-family: var(--ff-primary);
	font-size: 1.6rem;
}

/* Defines navigation "li" content with no list style and a font family of Arial */
.nav-items a {
	display: block;
	text-decoration: none;
	color: var(--color-primary);
	background-color: var(--color-accent);
	border-bottom: solid 0.8px var(--color-primary);
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 0.8em;
}

/* Navigaiton link hover changes background to black */
.nav-items a:hover {
	background-color: black;
}

/* Defines the active page navigation link with a font color of black */
.nav-items a.active {
	background-color: black;
}

/* Defines to background image and size for banner image with flex. */
.banner-container {
	background-image: url(/images/bg.jpg);
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 370px;
	display: flex;
	justify-content: flex-end;
}

/* Defines the size and margins of content within banner section */
.banner-container-content {
	margin-left: 1em;
	margin-right: 1em;
	margin-top: 5em;
	width: 482px;
}

/* Sets the font size of h2 in banner section */
.banner-container-content h2 {
	margin-bottom: 1.2em;
}

/* sets font size, color of white, background dark gray and Arial font */
.banner-container-content p {
	font-family: var(--ff-primary);
	font-weight: 500;
	font-size: 1.4rem;
	color: white;
	background-color: var(--color-secondary);
	margin-top: 0.6em;
	padding: 0.5em 1em 0.5em;
}

/* Defines the Read More link in the banner section with background of blue green and font colot white. */
a.read-link {
	width: fit-content;
	display: inline-block;
	margin-top: 1em;
	font-size: 1.4rem;
	padding: 1rem 1rem;
	text-decoration: none;
	color: var(--color-primary);
	background-color: hsl(177, 87%, 34%);
}

/* Adjusts the background color of Read More link on hover*/
a.read-link:hover {
	background-color: hsl(177, 87%, 41%);
}

/* Sets position of image content using flex */
.figure-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

/* Sets the top margin of content in the figure container */
.figure-content {
	margin-top: 2em;
}

/* Defines margin, size and black border around images.  Added in transition using opacity on hover. */
.figure-content img {
	margin-top: 0;
	margin-bottom: 0.2em;
	width: 400px;
	border: solid 1px black;
	opacity: 0.75;
	transition: opacity 400ms ease-in-out;
}

/* Sets font size and margin of h2 heading */
.figure-content h2 {
	font-size: 2rem;
	margin: 0 auto;
	display: block;
}

/* Sets the linkable text below image to no text decoration and font color black */
a.figure-link {
	text-decoration: none;
	color: black;
}

/* Setting opactiy of image on hover */
a.figure-link:hover img {
	opacity: 1;
}

/* Sets footers with flexbox content page center and column direction  with background color of dark gray and sets physical dimensions */
footer {
	/* display: grid;
	grid-template-columns: 1fr; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	background-color: var(--color-secondary);
	text-align: center;
	height: 122px;
	margin-top: 4em;
	margin-bottom: 4em;
	/* padding-top: 1em;
	padding-bottom: 0.5em; */
}

/* Define footer content at center using flexbox with no list styles */
footer ul {
	display: flex;
	justify-content: center;
	gap: 2em;
	list-style: none;
	padding: 0;
	padding-top: 0.5em;
	padding-bottom: 1.5em;
}

/* Sets footer p content with font color white and defines sizing. */
footer p {
	color: var(--color-primary);
	font-size: 1.6em;
	margin-top: 1.75em;
}

/* Define social icons using image sprite with set width and height. */
.social {
	background: url(../images/icons.jpg) no-repeat 0 0;
	display: block;
	width: 44px;
	height: 44px;
}

/* Start of section that defines the location for Social icons according to position on image sprite */
.twitter {
	background-position: 0 0;
}
.twitter:hover {
	background-position: -44px 0;
}

.facebook {
	background-position: 0 -44px;
}

.facebook:hover {
	background-position: -44px -44px;
}

.google {
	background-position: 0 -88px;
}

.google:hover {
	background-position: -44px -88px;
}

.pintrest {
	background-position: 0 -132px;
}

.pintrest:hover {
	background-position: -44px -132px;
}
/* End of section that defines the location for Social icons*/

@media (min-width: 970px) {
	/* Setting the navigation button to disappear when resize from smaller screens */
	#mobile-navigation {
		display: none;
	}

	/* Setting navigation bar position and initial display of block */
	#nav-dropdown {
		position: relative;
		display: initial;
	}

	/* Setting the direction of navigation bar to row with flex and position of static. Remove transformation from nav dropdown. */
	.nav-container {
		flex-direction: row;
		margin-top: 1.6em;
		width: 100%;
		border: none;
		position: static;
		transform: none;
	}

	/* Setting font size and family of navigation bar */
	.nav-items {
		padding: 1.4em;
		font-family: var(--ff-nav);
		font-size: 1.4rem;
		font-weight: bold;
	}

	/* Setting navigation links font size, color, text decoration none. */
	.nav-items a {
		display: block;
		text-decoration: none;
		color: var(--color-secondary);
		background-color: transparent;
		border-bottom: transparent;
		padding-top: 1em;
		padding-bottom: 0.8em;
		padding-left: 0;
	}

	/* Define text color and background color when navigation links are hovered over. */
	.nav-items a:hover {
		background-color: transparent;
		color: var(--color-accent);
	}

	/* Sets the background color and text color navigation link for the active page  */
	.nav-items a.active {
		background-color: transparent;
		color: var(--color-accent);
	}

	/* Sets position and height of the banner section using flex. */
	.banner-container {
		justify-content: center;
		align-items: center;
		position: relative;
		width: auto;
		/* height: 370px; */
	}

	/* Sets the content within banner to fixed width and position of absolute to position content appropraitely for resize. */
	.banner-container-content {
		width: 600px;
		position: absolute;
		top: -8%;
		left: 54%;
	}

	/* Increase font size for h2 heading */
	.banner-container-content h2 {
		font-size: 2rem;
		padding: 1.1em 1.5em;
	}

	/* Increase font size paragraph content and set it to fit content width. */
	.banner-container-content p {
		font-size: 2rem;
		padding: 0.75em 1.5em;
		width: fit-content;
	}

	/* Increase size of Read More with padding size */
	a.read-link {
		padding: 1.5em 1.75em;
		font-size: 1.6rem;
	}

	/* Change direction of image layout with flex row. */
	.figure-container {
		flex-direction: row;
	}

	/* Increase image size and margin */
	.figure-content img {
		width: 300px;
		margin-top: 2em;
		margin-bottom: 2em;
	}

	/* Sets footer flex direction to row. */
	.footer-container {
		width: 935px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* gap: 21%; */
	}

	/* Aligns and justifies content in the center of the footer */
	footer ul {
		padding: 0;
		justify-content: center;
		align-self: center;
	}

	/* Sets the font size and alignement for footer text and removes top margin*/
	footer p {
		margin-top: 0;
		text-align: left;
	}
}

@media (min-width: 960px) {
	/* Defines to container width and size for repsonsive for larger screens */
	/* .banner-container {
		width: 100%;
		height: auto;
	} */

	/* Defines to container width and size for repsonsive for larger screens */
	/* .banner-container img {
		width: 100%;
		height: auto;
	} */

	/* Adjust absolute position to percentage to replace margin-left position as starting point to allow for large screen resize */
	/* .banner-container-content {
		top: 0%;
		left: 53%;
		margin-left: 0;
	} */
}