#navbar {
	position: fixed;
	inset: 0 0 auto 0;
	height: 5rem;
	padding: 0 3rem;
	color: var(--white);
	background: var(--light_grey);
	z-index: 1000;
	transition: 0.5s;

	a {
		color: inherit;
		text-decoration: none;
	}

	nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		font-weight: 700;
		text-transform: lowercase;
		gap: 1rem;

		#navlanding {
			height: 2.2rem;
			width: auto;
		}

		ul {
			display: flex;
			gap: 1rem;
			list-style: none;
		}
	}

	.skip-link {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0.5rem;
		margin: 1rem;
		background: light-dark(var(--white), var(--grey));
		transform: translateY(calc(-100% - 1rem));
		transition: transform 0.1s;
		border-radius: 0.25rem;

		&:focus-within {
			transform: translateY(0%);
		}
	}

	@media (max-width: 45rem) {
		height: 4rem;
		padding: 0 0.8rem;
	}
}