@media (max-width: 43rem) {
	#navigation-bar {
		padding: 0 2rem;
	}

	#nav-list {
		visibility: hidden;
		width: 0;
	}

	#nav-list-mobile-container {
		position: fixed;
		top: var(--navbar-height);
		right: 0;
		width: 100%;
		height: 100%;
		padding: 2rem 1rem;
		background-color: var(--background-color);
		z-index: 200;
		transition: all 200ms ease;
	}

	#nav-list-mobile {
		list-style: none;
		display: flex;
		justify-content: start;
		flex-direction: column;
	}

	#nav-list-mobile > li {
		padding: 1rem 0;
		color: var(--unhighlighted-color);
		cursor: pointer;
		text-align: right;
		font-size: 1.5rem;
	}

	#nav-list-mobile > li.highlight {
		font-weight: bold;
		color: var(--primary-color);
	}

	#nav-list-mobile > li > a {
		position: relative;
		top: 0;
		text-decoration: none;
		padding: var(--navbar-vertical-padding) 1rem;
		color: inherit;
		transition: top 300ms ease;
	}

	#nav-list-mobile > li:hover > a {
		top: -0.5rem;
		color: var(--primary-accent-color);
	}

	#nav-list-mobile > li.highlight:hover > a {
		top: -0.5rem;
		color: var(--primary-color);
	}

	#nav-button {
		display: initial;
		height: 2.5rem;
		width: 2.5rem;
		filter: var(--primary-color-filter);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin: auto 0;
	}

	footer {
		margin-top: 10rem;
		padding: 2rem;
	}
}

@media only screen and (max-height: 43rem) {
	footer {
		margin-top: 10rem;
		padding: 1rem 15vw;
	}
}