@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;
	}
}
@media screen and (max-width: 920px) {
	body > nav {
		border: 0;
	}
	header {
		margin: 0;
		padding: 0;
		border-right: 0;
		border-radius: 0;
		width: 100%;
	}
	body::after {
		content: none;
	}
}
@media screen and (max-width: 450px) {
	#artworks & article {
		&::before {
			width: calc(100% + var(--pad-l) * 2) !important;
			margin: -3rem 0 0 -16px;
		}
	}
}