/* 
 * reset 
 * use: https://www.joshwcomeau.com/css/custom-css-reset/
**/
@layer base {
	/* 1. Use a more-intuitive box-sizing model */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* 2. Remove default margin */
	*:not(dialog) {
		margin: 0;
	}

	/* 3. Enable keyword animations */
	@media (prefers-reduced-motion: no-preference) {
		html {
			interpolate-size: allow-keywords;
		}
	}

	body {
		/* 4. Increase line-height */
		line-height: 1.5;
		/* 5. Improve text rendering */
		-webkit-font-smoothing: antialiased;
	}

	/* 6. Improve media defaults */
	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	/* 7. Inherit fonts for form controls */
	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	/* 8. Avoid text overflows */
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	/* 9. Improve line wrapping */
	p {
		text-wrap: pretty;
	}
	
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		text-wrap: balance;
	}

	/*
	10. Create a root stacking context
	*/
	#root,
	#__next {
		isolation: isolate;
	}

	/* Additional changes */
	/* By default, inherit font color */
	a,
	* {
		color: inherit;
	}
}