#navbar {
	display: grid;
	place-content: center;
	margin-block-end: 5rem;

	nav {
		background: var(--green);
		border-radius: 0 0 5px 5px;
		padding-block: 0.25rem;
		padding-block-start: 0.5rem;
		padding-inline: 1rem;

		&:hover {
			background: linear-gradient(var(--green), var(--lesser_green));
		}
	}
}

#navbar,
#navbar a {
	color: light-dark(var(--white), var(--black));
}

#navlanding {
	font-size: 1.2rem;
	text-decoration: none;
	font-weight: 700;
	font-variation-settings: "CRSV" 0.9;
}

.skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	font-weight: bold;
	background: var(--green);
	transform: translateY(calc(-100% - 2rem));
	transition: transform 0.1s;
	border-bottom-right-radius: 5px;
	z-index: calc(infinity);

	a {
		color: var(--black);
	}

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