nav {
	flex-direction: column;
}

nav .navTitle {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

nav .openNavigation {
	display: block;

	background-color: var(--background-color);
	height: 2rem;
	width: 2rem;
	border: none;
	border-radius: 3rem;
	
}

nav .openNavigation:hover {
	border: .1rem solid var(--accent-color);
}

nav .openNavigation > svg {
	width: 100%;
	height: 100%;
}

nav .navigation {
	display: none;
	flex-direction: column;
    	gap: 1rem;
}

nav[data-open] .navigation {
	display: flex;
}

nav[data-open] hr {
	display: block;
	width: 65%;
	border-style: solid;
}

nav .pages {
	display: none;
	flex-direction: row;
	gap: 1rem;
}

nav[data-open] .pages {
	display: flex;
}