header{
	background-color: skyblue;
}

header h1 {
	text-align: center;
	color: #3f2616;
	
}

hr {
	border: 0;
	border-top: 1px solid black;
	opacity: 1;
}

main {
	display: flex;
	flex-direction: column;
}

#page-title {
	font-size: 2rem;
	margin-top: 1rem;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
nav {
	text-align: left;
	font-family: 'Roboto', sans-serif;
}

nav ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

nav a {
	display: block;
	padding: 0.5rem 0.75rem;
	color: black;
	text-decoration: none;
}

nav a:hover,
nav a:focus-visible {
	color: blue;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background-image: url("./treeph.png");
	background-position: center;
	background-size: cover;
	background-color: #24442c;

}

footer {
	margin-top: auto;
	background-color: #2b180c;
	text-align: left;
	color: white;
}