@import url("./media.css");
@import url("./blog.css");
@import url("./gallery.css");
@import url("./home.css");
@import url("./nav.css");
@import url("./variables.css");

:is(a, button):not(span *, .postscript *, body nav *),
.link,
#posts a {
	color: var(--citrus-dark);
	transition: background-color var(--trans);
	background-color: var(--citrus-primary);
	&:is(:hover, :focus) {
		color: var(--citrus-dark-extra);
		background-color: var(--citrus-secondary);
	}
	& a {
		color: inherit;
	}
}
body {
	color: var(--citrus-dark-extra);
	background-color: var(--citrus-primary);
	background-image: var(--paw-tiled);
	background-size: 128px;
	background-attachment: local;
	background-repeat: repeat;
	background-blend-mode: soft-light;
	animation: mainbg 10s linear infinite;
}
header {
	color: var(--citrus-dark);
}
ul:not([role]) li::before {
	background-color: var(--citrus-dark-extra);
}
article {
	background:
		var(--noise),
		linear-gradient(
			var(--citrus-light) 70%,
			color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
		);
	border-radius: 0;
	box-shadow: var(--shadow-heavy);
	border: 0;
	& .header-anchor {
		border-radius: 0;
	}
	& code:not(pre *) {
		border-radius: 0;
		background-color: var(--citrus-dark);
		color: var(--citrus-primary);
	}
	&:not(pre, code, a) {
		font-family: "Nosey Rodent", sans-serif;
	}
}