styles.css

#desktop-navigation, #mobile-navigation {
	background-color: var(--tjs-dark-bg);
	font-weight: bold;
	padding: var(--size-2);
}

.nav-links {
	gap: var(--size-2);
	align-items: center;
	list-style: none;
	display: flex;
	padding: var(--size-3)
}

.nav-links a {
	color: white;
}

.logo-rounded {
	border-radius: var(--size-2);
}

#hamburger-button {
	background-color: transparent;
	padding: var(--size-3)
}

#mobile-navigation {
	display: none;
}

#mobile-menu:popover-open {
	width: 100%;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	padding: var(--size-3)
}

#mobile-menu:popover-open ul {
	display: flex;
	flex-direction: column;
	padding: var(--size-2);
}

#mobile-menu:popover-open button {
	background-color: transparent;
	margin-left: auto;
	padding: var(--size-2);
}

#mobile-logo {
	align-content: center;
	padding: var(--size-3);
}

@media (max-width: 32rem) {
	#mobile-navigation {
		display: flex;
		justify-content: space-between;
		text-align: right;
	}

	#desktop-navigation {
		display: none;
	}
}

@media (max-width: 32rem) {
	.nav-links {
		flex-direction: column;
	}
}