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

body {
	background-attachment: local;
	background-blend-mode: soft-light;
	background-color: var(--citrus-primary);
	background-image: var(--paw-tiled);
	background-repeat: repeat;
	background-size: 128px;
	color: var(--citrus-dark-extra);
}
main :is(a, button) {
	background-color: var(--citrus-mix-light);
	border-color: var(--citrus-mix);
	color: var(--citrus-dark);
}
ul 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%
		);
	box-shadow: var(--shadow-heavy);
	border: 0;
	border-radius: 2px;
}
@media screen and (max-width: 916px) {
	body::after {
		content: none;
	}
}
@media screen and (min-width: 916px) {
	nav#default {
		height: max-content;
	}
	header {
		margin-top: 0;
	}
}