@layer preset {
	/* Use the more intuitive box-sizing reckoning */
	*,
	*:before,
	*:after {
		box-sizing: border-box;
	}

	/* Line Height calculation taken from https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
	* {
		margin: 0;
		padding: 0;
		font: inherit;
	}

	/* Allow percentage-based heights in the application */

	/* Making sure text size is only controlled by font-size */
	html {
		height: 100%;
		-webkit-text-size-adjust: none;
		font-family: var(--ff-primary);
		line-height: calc(.25rem + 1em + .25rem);
		overflow-x: hidden;
	}

	/* Smooth scrolling for users that have no preference regarding motion */

	@media (prefers-reduced-motion: no-preference) {
		html:focus-within {
			scroll-behavior: smooth;
		}
	}

	/* MacOS browsers use subpixel antialiasing my default so we switch to 'antialiased' */

	/*
		We choose speed over legibility as the differences only arise with
		font sizes less than 20px and are negligible in most other circumstances.

		There may still be performance issues per: http://www.marco.org/2012/11/15/text-rendering-optimize-legibility
	*/

	/* Set the min height to the extent of the viewport by default */
	body {
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		text-size-adjust: 100%;
		min-height: 100%;
		position: relative;
	}

	/* Remove borders from all elements except for certain form-related ones */
	*:not(fieldset, progress, meter) {
		border-width: 0;
		border-style: solid;
		background-origin: border-box;
		background-repeat: no-repeat;
	}

	/* Common defaults for replaced elements */
	img,
	svg,
	picture,
	video,
	canvas,
	audio,
	iframe {
		display: block;
	}

	img,
	svg,
	picture,
	video {
		height: auto;
		max-width: 100%;
	}

	/* Remove stroke and set fill color to the inherited font color */
	svg {
		stroke: none;
		fill: currentColor;
	}

	/* SVG's without a fill attribute */
	svg:not([fill]) {
		stroke: currentColor;
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	img{
		border-bottom: 5px solid hsl(var(--clr-yellow));
	}

	/* Set a size for SVG's without a width attribute */
	svg:not([width]) {
		width: 5rem;
	}

	/* Allow form-related elements to inherit typography rules */
	input,
	button,
	textarea,
	select {
		letter-spacing: inherit;
		word-spacing: inherit;
	}

	/*
		Probably makes more sense to only allow the user to
		resize textareas vertically.
	*/
	textarea {
		resize: vertical;
	}

	/* Clearly indicate interactive elements */
	a[href],
	area,
	button,
	label[for],
	select,
	summary,
	[tabindex]:not([tabindex*="-"]) {
		cursor: pointer;
		touch-action: manipulation;
	}

	/* Disabled cursor for disabled inputs */
	:is(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled]:not([disabled="false"]) {
		cursor: not-allowed;
	}

	a[href^="http"]:not(:where([href*="localhost"], [href*="invisionhawaii.anthology-digital.com"], [href*="invisionhawaii.com"], .no-ext-icon)):after{
		content: '\f08e';
		font-family: FontAwesome;
		font-size: .8em;
		margin-left: .5em;
	}

	p,
	a,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p{
		line-height: 1.5;
	}

	/*
		Position list marker inside so as to
		not allow them to "float" outside
	*/
	ul,
	ol {
		list-style-position: inside;
	}

	strong {
		font-weight: 600;
	}

	em {
		font-style: italic;
	}

	a:link{
		color: hsl(var(--clr-teal));
	}
}