@charset "UTF-8";

@layer Normalisation
{
	*, *::after, *::before
	{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	:focus-visible
	{
		/*
		 * Outlining focused elements helps with keyboard navigation.
		 */
		outline: 0.15rem solid Highlight;
		outline-offset: 0;
	}

	:where(address, audio, blockquote, canvas, details, dl, embed, h1, h2, h3, h4, h5, h6, iframe, img, menu, object, ol, p, pre, table, ul, video):first-child:not(:where(hgroup *))
	{
		margin-block-start: 0;
	}

	:where(address, audio, blockquote, canvas, details, dl, embed, h1, h2, h3, h4, h5, h6, iframe, img, menu, object, ol, p, pre, table, ul, video):last-child:not(:where(hgroup *))
	{
		margin-block-end: 0;
	}

	/*************
	 * Main root *
	 *************/

	html
	{
		overflow-y: scroll;
	}

	/*******************
	 * Sectioning root *
	 *******************/

	body
	{
		font: normal normal normal normal 1rem/1.5rem sans-serif;
		margin: 1rem;
	}

	/**********************
	 * Content sectioning *
	 **********************/

	address
	{
		/*
		 * Addresses are rarely displayed in italics.
		 */
		font-style: normal;
		margin-block: 1rem;
	}

	h1
	{
		font-size: 2rem;
		line-height: 2.2rem;
		margin-block: 1rem;
	}

	h2
	{
		font-size: 1.8rem;
		line-height: 2rem;
		margin-block: 1rem;
	}

	h3
	{
		font-size: 1.6rem;
		line-height: 1.8rem;
		margin-block: 1rem;
	}

	h4
	{
		font-size: 1.4rem;
		line-height: 1.6rem;
		margin-block: 1rem;
	}

	h5
	{
		font-size: 1.2rem;
		line-height: 1.4rem;
		margin-block: 1rem;
	}

	h6
	{
		font-size: 1rem;
		line-height: 1.2rem;
		margin-block: 1rem;
	}

	/****************
	 * Text content *
	 ****************/

	:is(dl, menu, ol, ul) :is(dl, menu, ol, ul)
	{
		margin-block: 0;
	}

	blockquote
	{
		border-inline-start: 0.15rem solid #000000;
		padding-block: 1rem;
		padding-inline: 3rem;
	}

	blockquote p
	{
		/*
		 * Paragraphs inside blockquotes should not add to gaps between blockquotes and other elements.
		 */
		margin: 0;
	}

	dd
	{
		margin-inline-start: 3rem;
	}

	dl
	{
		margin-block: 1rem;
	}

	dl p
	{
		/*
		 * Paragraphs inside definition lists should not add to gaps between definition lists and other elements.
		 */
		margin: 0;
	}

	dt
	{
		font-weight: bold;
		margin-block-end: 0.5rem;

		&:not(:first-child)
		{
			margin-block-start: 0.5rem;
		}
	}

	hr
	{
		border: 0.1rem solid #000000;
	}

	menu
	{
		list-style-type: disc;
		margin-block: 1rem;
		padding-inline-start: 3rem;
	}

	ol
	{
		margin-block: 1rem;
		padding-inline-start: 3rem;
	}

	p
	{
		hyphens: auto;
		margin-block: 1rem;
		text-align: justify;
	}

	pre
	{
		background-color: #F8F9FA;
		border: 0.1rem solid #DADDE3;
		margin-block: 1rem;
		overflow-x: auto;
		padding: 0.5rem;
	}

	pre code
	{
		border: 0;
		padding: 0;
	}

	ul
	{
		list-style-type: disc;
		margin-block: 1rem;
		padding-inline-start: 3rem;
	}

	/*************************
	 * Inline text semantics *
	 *************************/

	a
	{
		text-decoration: none;
	}

	abbr[title]
	{
		cursor: help;
	}

	cite
	{
		font-style: normal;
	}

	code
	{
		background-color: #F8F9FA;
		border: 0.1rem solid #DADDE3;
		padding-inline: 0.3rem;
	}

	kbd kbd
	{
		border-radius: 0.2rem;
	}

	kbd kbd, kbd samp
	{
		background-color: #F8F9FA;
		border: 0.1rem solid #DADDE3;
		font-size: 0.9rem;
		font-weight: bold;
		padding-inline: 0.3rem;
		white-space: nowrap;
	}

	mark code
	{
		background-color: inherit;
	}

	q::after, q::before
	{
		/*
		 * Quotation marks should be present in HTML documents for copy-and-paste fidelity, consistency with other punctuation, predictability across user agents and authorial control.
		 */
		content: none;
	}

	span[title]
	{
		cursor: help;
		/*
		 * Underline span elements with title attributes (tool tips).
		 * Same style as attr[title] as both Chromium and Firefox add a dotted underline.
		 */
		text-decoration: dotted underline;
	}

	/************************
	 * Image and multimedia *
	 ************************/

	audio, img, video
	{
		block-size: auto;
		display: block;
		margin-block: 1rem;
		max-width: 100%;
	}

	img
	{
		/*
		 * Fallback text (alt attribute) should be visually distinct from surrounding text.
		 */
		display: block;
		font-style: italic;
	}

	/********************
	 * Embedded content *
	 ********************/

	embed, iframe, object
	{
		/*
		 * Chromium and Firefox give iframe a border but not embed and object.
		 * All three elements have overlapping functionality but also unique aspects.
		 * Normalise border properties and make no assumption about usage and appearance.
		 */
		block-size: auto;
		border: 0;
		display: block;
		margin-block: 1rem;
		max-width: 100%;
	}

	/*************
	 * Scripting *
	 *************/

	canvas
	{
		display: block;
		margin-block: 1rem;
	}

	/*****************
	 * Table content *
	 *****************/

	caption
	{
		font-weight: bold;
	}

	table
	{
		background-color: #F8F9FA;
		border: 0.1rem solid #A2A9B1;
		border-collapse: collapse;
		margin-block: 1rem;
	}

	td
	{
		border: 0.1rem solid #A2A9B1;
		padding: 0.3rem;
	}

	th
	{
		background-color: #EAECF0;
		border: 0.1rem solid #A2A9B1;
		font-weight: bold;
		padding: 0.3rem;
	}

	/*********
	 * Forms *
	 *********/

	button, input, select, textarea
	{
		font-family: inherit;
		font-size: inherit;
		padding-block: 0.1rem;
		padding-inline: 0.3rem;
		vertical-align: middle;
	}

	button, input:not([type="checkbox"], [type="file"], [type="image"], [type="radio"]), select
	{
		block-size: 2rem;
	}

	button:hover, input:hover, select:hover, textarea:hover
	{
		outline: 0.15rem solid Highlight;
		outline-offset: 0.15rem;
	}

	fieldset
	{
		padding: 0.5rem 1rem;
	}

	input[type="checkbox"], input[type="radio"]
	{
		vertical-align: baseline;
	}

	legend
	{
		padding-inline: 0.5rem;
	}

	textarea
	{
		/*
		 * The specified block size should apply to the content (text) irrespective of border width and padding size.
		 */
		block-size: 3lh;
		box-sizing: content-box;
		font: inherit;
	}

	/************************
	 * Interactive elements *
	 ************************/

	details
	{
		margin-block: 1rem;
	}

	dialog
	{
		border: 0.1rem solid #000000;
		margin: auto;
		padding: 1rem;
	}
}