h1 img {
	display: flex;
	justify-self: center;
	position: relative;
	border-radius: 75px;
	max-width: 100%;
	margin-top: 3em;
}

/* hide mobile menu on desktop */
.mobile_menu_button,
.mobile_header {
	display: none;
}

/* FONT */
@font-face {
    font-family: 'action_manbold';
    src: url('fonts/RobotoSlab-Bold-webfont.woff') format('woff');
}

/* VARIABLES */
:root{
	--menu-count: 6;

	/* 70s palette */
	--avocado: #6b8e23;
	--burnt-orange: #cc5500;
	--mustard: #d4a017;
	--brown: #3b2f2f;
	--cream: #f5f1e3;
	--light-orange: #d2940e;
}

/* HEADER */
.header_main {
	display: flex;
	flex-direction: row;
	background-color: var(--brown);
	background-size: cover;
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	z-index: 100;
}

.header_main nav {
	display: flex;
	height: 60px;
}

.header_main .logo img{
	height: 60px;
}

/* NAV LIST */
.header_main ul {
	height: 100%;
	padding-left: 40px;
	list-style: none;
	display: flex;
	align-self: center;
}

.header_main ul li{
	position:relative;
}

/* NAV LINKS */
.header_main ul li a {
	display: block;
	height: 100%;
	padding: 0 10px;
	line-height: 60px;
	font-size: 1rem;
	font-family: 'action_manbold';
	color: var(--mustard);
	text-transform: uppercase;
	text-decoration: none;
	transition: all ease-in-out 100ms;
	border-radius: 15px;
}

/* hover */
.header_main a:hover {
  color: var(--cream);
  border-radius: 15px;
  cursor: pointer;
}

/* FOOTER */
.footer_main {
	display: flex;
	justify-content: space-evenly;
	background-color: #3b2f2f;
	background-size: cover;
	margin-top: 9em;
	padding: 1em;
	font-size: 15px;
	color: white;
}

.footer_sitemap {
	display: flex;
	flex-direction: row;
	gap: 55px;
}

.footer_sitemap li {
	list-style-type: none;
	text-transform: uppercase;
}
/* footer hover */
.footer_sitemap a:hover{
	color: black;
	cursor: pointer;
}

/* borders */
.footer_sitemap ul:nth-child(1){
	padding-left: 20px;
}

.footer_sitemap ul:nth-child(2) {
	padding-right: 20px;
}

/* COPYRIGHT */
.copyright {
	color: white;
	font-size: 21px;
	text-align: center;
	background-color: #3b2f2f;
	padding: 5px;
}
.legal {
	color: white;
	font-size: 21px;
	text-align: center;
	background-color: #3b2f2f;
	padding: 5px;
}
.legal a:hover {
	color: black;
	cursor: pointer;
}
/* MOBILE */
@media screen and (max-width: 852px){

	.footer_main {
		flex-direction: column;
	}

	.footer_sitemap {
		flex-direction: column;
	}

	.footer_sitemap ul:nth-child(1){
		border-left: 0;
	}

	.footer_sitemap ul:nth-child(2) {
		border-right: none;
	}

	.mobile_header {
		display: flex;
		position: absolute;
		top: 0;
		left: 15px;
		z-index: 200;
	}

	.mobile_menu_button {
		display: flex;
		width: 60px;
		height: 60px;
		position: absolute;
		top: 0;
		right: 15px;
		z-index: 200;
	}

	.mobile_background {
		height: 60px;
		background-color: var(--brown);
	}

	.header_main {
		display: none;
		height: 100vh;
		flex-direction: column;
	}

	.header_main ul li{
		border-top: 1px solid var(--mustard);
	}

	.header_main ul li a {
		font-size: 2.5rem;
		color: var(--mustard);
	}

	/* remove hover effect on mobile */
	.header_main a:hover {
	  background-color: transparent;
	  color: var(--cream);
	}
}