joy.css

:root {
	--spacer-xxs: 0.25rem;
	--spacer-xs: 0.5rem;
	--spacer-sm: 0.75rem;
	--spacer-base: 1.25rem;
	--spacer-md: 2rem;
	--spacer-lg: 3.25rem;
	--container-width: 70ch;

	font-size: 1.25rem;
}

body {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	margin: auto;
	max-width: var(--container-width);
	padding: var(--spacer-sm);

	line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
}

ul {
	padding: 0 var(--spacer-base);
}
ul > li + li {
	margin-top: var(--spacer-xs);
}
ul[role=list],
ol[role=list] {
	list-style: none;
}

button {
	border-radius: var(--spacer-xs);
	padding: var(--spacer-xxs) var(--spacer-xs);
	border: 1px solid gray;
	margin: var(--spacer-xs) 0;
}

button + a,
a + button {
	margin-left: var(--spacer-xxs);
}

:focus {
	outline: 2px solid lightskyblue;
	outline-offset: var(--spacer-xxs);
}

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

iframe {
	width: 100%;
	min-height: 15rem;
}

th, td {
	padding: var(--spacer-sm);
}