/* header-sticky for dev.css v6, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
/* about: makes the header sticky (when vh>24rem/vw>16rem). useful if the user needs to access nav often */
/* note: large sticky headers are bad for usability. too large? try header-oneline addon */

@media (min-height: 24rem) and (min-width: 16rem) {
	header {
		position: sticky;
		top: 0;
		z-index: 1000;
		margin: -1rem;
		padding: 1rem;
		background-color: var(--dc-bg-2);
	}

	@supports (backdrop-filter: blur(8px)) {
		header {
			backdrop-filter: blur(8px);
			background-color: color-mix(in srgb, var(--dc-bg-2) 50%, transparent);
		}
	}
}