website/_src/assets/css/citrus/nav.css

.navbar {
	color: var(--citrus-dark);
	& section {
		background: var(--details-bg);
		box-shadow: var(--details-shine);
		border: var(--details-border);
		& h3 {
			filter: drop-shadow(2px 0 var(--citrus-dark))
				drop-shadow(-2px 0 var(--citrus-dark))
				drop-shadow(0 2px var(--citrus-dark))
				drop-shadow(0px -2px var(--citrus-dark));
			color: var(--citrus-light);
		}
	}
	& li :is(a, button) {
		background: var(--button-bg);
		box-shadow: var(--button-shine);
		border: var(--button-border);
		border-radius: var(--round);
		color: inherit;
		&[aria-current] {
			background: var(--button-current-bg);
			box-shadow: var(--button-current-shine);
			border: var(--button-current-border);
			color: var(--citrus-light);
		}
		&:is(:hover, :focus):not([aria-current]) {
			background: var(--button-hover-bg);
			box-shadow: var(--button-hover-shine);
			border: var(--button-hover-border);
			transition:
				background-image var(--trans),
				border-color var(--trans),
				box-shadow var(--trans);
			color: var(--citrus-mix-dark);
		}
	}
}
nav#default,
nav#floating,
header {
	color: var(--citrus-dark);
	background-attachment: fixed;
	background-image: var(--nav-bg);
	background-size: 6px;
}
nav#floating,
nav#default {
	border-bottom-style: solid;
	border-right-style: solid;
	border-bottom-width: 4px;
	border-right-width: 4px;
}
nav#default {
	border-bottom-right-radius: var(--pad-l);
}
@media screen and (max-width: 916px) {
	header {
		background: none;
	}
}

@media screen and (min-width: 916px) {
	header {
		display: flex;
		width: var(--view);
		border-right-width: 4px;
		border-right-style: solid;
		border-bottom-width: 4px;
		border-bottom-style: solid;
		border-bottom-right-radius: 100px;
		margin-left: calc(var(--view) - 4px);
		padding: var(--pad-m) 0;
	}
}