html {
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
	outline-offset: 3px;
}

body {
	margin: 0;
	padding: 7%;
	background-color: #e5e5e5;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/**
 * Visually hidden text intended for screen reader users
 * See: https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
 * - Set width and height to 1 pixel, because some screen readers don’t announce an element with a size of 0 pixels
 *   margin: -1px; to hide it completely from sight
 * - word-wrap: normal; to avoid screen readers reading the text letter for letter, as the text is placed in a 1 pixel 
 *   wide space. Many screen reader and browser combinations announce broken words as they would appear visually.
 * - clip is deprecated, but is added to support older browsers that don’t support clip-path yet.
 */
.sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

dt {
	float: left;
	clear: left;
	width: auto;
	text-align: right;
	font-weight: bold;
}

dt::after {
	content: ":";
}

dd {
	margin: 0 0 0 130px;
	padding: 0 0 0.5em 0;
}

/* Mimics mobile screen for demo purposes */
.mobile-screen {
	border: 2px solid black;
	max-width: 500px;
	aspect-ratio: 6 / 10;
	position: relative;
	overflow: scroll;
}

.mobile-screen > p {
	padding: 16px;
	font-size: 1.25rem;
	line-height: 1.5;
}