/* https://garden.bradwoods.io/notes/css/reset */
*,
*::before,
*::after {
	/* Use a more intuitive box-sizing model */
	box-sizing: border-box;
	/* https://www.youtube.com/watch?v=cH8VbLM1958 */
	min-width: 0;
	/* Remove all margins and padding */
	margin: 0;
	padding: 0;

}

/* Only show focus outline when the user is tabbing (not when clicking) */
/* Except for input and textarea */
*:focus:not(:is(input, textarea)) {
	outline: none;
}

*:focus-visible {
	outline: 1px solid blue;
}

html {
	/* Allow percentage-based heights */
	/* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */
	height: 100%;

	/* Default font size */
	font-size: 16px;
	
	/* Prevent the browser from synthesizing missing typefaces */
	font-synthesis: none;
	font-smooth: always;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	/* Prevent mobile browsers increasing font-size */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	height: 100%;

	/* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
	overscroll-behavior: none;

	/* UI controls color (example: range input) */
	accent-color: black;

	/* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs  */
	background: white;
}

p {
	/* Prevents orphans (ensures the final line of text has at least two words). */
	text-wrap: pretty;
	/* Avoid text overflow */
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
	/* Stronger effect than 'pretty'. Attempts to make each line of text the same length */
	text-wrap: balance;
}

strong {
	overflow-wrap: break-word;
}

/* Remove unintuitive behaviour such as gaps around media elements.  */
img, picture, video, canvas, svg, iframe {
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
}

ul, ol {
	list-style: none;
}