/* Derived from Kevin Powell's CSS reset - https://codepen.io/kevinpowell/pen/abMdOpp */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
		font: inherit;
	}

	html {
		color-scheme: dark light;
		hanging-punctuation: first last;
	}

	body {
		overflow-y: scroll;
	}

	html,
	body {
		height: 100%;
	}

	/* responsive images/videos */
	img,
	picture,
	svg,
	video {
		display: block;
		max-width: 100%;
	}

	/* Improved heading in supported browsers */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		text-wrap: balance;
	}

	p,
	li {
		max-width: var(--p-max-width, 65ch);
		text-wrap: pretty;
	}
}