body {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.25;
}

h1 {
	color: #dedede;
}

h2 {
	color: #eeeeee;
}

a {
	color: #3e96ff;
}

img {
	width: 100%;
	height: auto;
}

figure {
	margin-left: 0;
	margin-right: 0;
}

figcaption {
	font-size: 80%;
}

table {
	max-width: 27rem;
	margin: auto;
	table-layout: fixed;
	border-collapse: collapse;
}

table > caption {
	caption-side: bottom;
	line-height: 1.5;
}

thead {
	line-height: 1.5;
	border-top: 2px solid #fff;
	border-bottom: 1px solid #fff;
}

tbody {
	  border-bottom: 2px solid #fff;
}

tr {
	  text-align: left;
}

tr :nth-child(1) {
	width: 30%;
}
tr :nth-child(2) {
	width: 70%;
}

canvas {
	border: 1px solid white;
}

pre, table {
	overflow-x: auto;
}

pre:has(code) {
	padding: 0.5rem;
	border: 1px solid;
	border-color: hsl(0, 0%, 66%);
	border-radius: 0.25rem;
}

pre:has(samp) {
	padding: 0.25rem 0.6rem;
	border: 1px solid;
}

pre:has(.error) {
	color: hsl(10,100%,70%);
	background-color: hsl(6, 23%, 25%);
	border-color: hsla(20,100%,50%,0.12);
}

pre:has(.number) {
	color: hsl(276,100%,85%);
	background-color: #2b2b2b;
	border-color: hsl(0, 0%, 33%);
}

ul {
	padding-inline-start: 1.75rem;
}

dl dt, dl dd {
	display: inline;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0;
}

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

.graph > img {
	background-color: white;
	padding: 1rem;
}

#first::first-letter {
	font-size: 2lh;
	float: left;
	line-height: 1;
	margin-right: 0.1rlh;
}





/* *****DEMO STUFF***** */

#demo {
	display: grid;
	grid-template-areas:
	  "a b"
	  "c c";
	grid-template-columns: auto 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

#demo > canvas {
	grid-area: a;
}

#demo > div {
	grid-area: b;
}

#demo > button {
	grid-area: c;
}

#demo input[type="number"] {
	width: 4rem;
}