@import url("./variables.css");
@import url("../default/variables.css");
@import url("./nav.css");

body {
	background-attachment: local, fixed;
	background-color: var(--citrus-primary);
	background-image: var(--checker),
		linear-gradient(var(--citrus-primary), var(--citrus-secondary));
	background-size: 32px, contain;
}
body > nav {
	background-attachment: fixed;
	background-blend-mode: screen;
	background-image: var(--dot),
		linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
	background-size: 6px;
	& a,
	button {
		background-image: linear-gradient(
			var(--citrus-light),
			var(--citrus-primary) 20%,
			var(--citrus-primary) 80%,
			var(--citrus-light) 100%
		);
		border-radius: 0 1rem 1rem 0;
		box-shadow: 0 0 0 2px var(--citrus-dark),
			inset 0 0 8px 2px var(--citrus-primary);
		color: var(--citrus-dark) !important;
		margin: 0 0 var(--pad-sm) 0 !important;
		&[aria-current] {
			background-image: linear-gradient(
				darkorange,
				var(--citrus-dark) 10%,
				chocolate
			);
			box-shadow: 0 0 0 2px var(--citrus-dark),
				inset 0 0 4px 2px var(--citrus-dark);
			color: var(--citrus-light) !important;
		}
		&:is(:hover, :focus):not([aria-current="page"]) {
			box-shadow: 0 0 0 2px var(--citrus-dark);
		}
	}
}