/* Boiler plate code below */
:root {
	--primary-color: #338000ff;
	--hover-color: #3fa300ff;
	--accent-color: #0440b8;
	--text-color: white;
	--text-color-inverse: black;
}

html {
	font-family: sans-serif;
	color: var(--text-color);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Makes images behave normally as a box */
img {
	width: 100%; 
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Make headers grow with viewport width */
h1, h2, h3 {
	font-size: clamp(1.3rem, 2.4vw , 1.55rem);
}

/* ------------------------ */

header {
	align-items: center;
}

#header-logo-mobile {
	height: 66px;
	width: 120px;
	display: none;
	padding: 0em;
	background: none;
	border: none;
}

nav {
	background-color: var(--primary-color);
	border-bottom: 1px solid var(--hover-color);
}

nav ul{
	list-style: none;
	display: flex;
}

nav li {
	display: flex;
}

nav .home-li{
	margin-right: auto;
}

nav a {
	display: flex;
	text-decoration: none;
	color: var(--text-color);
	padding: 1em 2em;
	transition: background-color 150ms ease;
}

nav a:hover {
	background-color: var(--hover-color);
}

nav a.active-link {
	border-bottom: 2px solid var(--text-color);
}

#open-sidebar-button {
	display: none;
	background: none;
	border: none;
	padding: 1em;
	margin-left: auto;
	cursor: pointer;
}

#close-sidebar-button {
	display: none;
	background: none;
	border: none;
	padding: 1em;
	cursor: pointer;
}

#menu-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	inset: 0;
	z-index: 9;
	display: none;

}

@media (max-width: 50rem) {
	#open-sidebar-button, #close-sidebar-button, #header-logo-mobile {
		display: block;
	}
	header {
		display: flex;
	}
	nav {
		position: fixed;
		top: 0;
		/* By default nav is off-screen */
		right: -100%;
		height: 100vh;
		width: min(15em, 100%);
		z-index: 10;
		border-left: 1px solid var(--hover-color);
		transition: right 300ms ease-out;
	}
	nav.show {
		right: 0;
	}

	nav.show ~ #menu-overlay {
		display: block;
	}

	nav ul {
		width: 100%;
		flex-direction: column;
	}
	nav a {
		width: 100%;
		padding-left: 2.5em;
	}
	nav a.active-link {
		border-bottom: none;
	}
	nav .home-li {
		margin-right: unset;
	}

}