@layer layout {
	html,
	body {
		margin: 0;
		padding: 0;
	}

	html {
		background: white;
		color: black;
	}

	body {
		font-size: clamp(1.1em, calc(0.5em + 1vw), 3em);
		line-height: 1.42;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	}

	main {
		font-weight: 300;
		width: 90vw;
		max-width: 40em;
		margin: 0 auto;
		padding: 4rem 0;
	}

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

	main :is(h1, h2, h3) {
		font-family: Georgia, 'Times New Roman', Times, serif;
	}

	main h1 {
		font-size: 3em;
	}

	main h2 {
		font-size: 2em;
		margin-top: 5rem;
		border-bottom: 1px solid #ccc;
	}

	a, a:visited {
		color: blue;
	}

	figcaption {
		text-align: center;
		font-style: italic;
		font-size: 75%;
	}
}

@layer code {
	pre {
		border: 1px solid #dedede;
		padding: 1em;
		background: #f7f7f7;
		font-family: "Courier 10 Pitch", Courier, monospace;
		overflow-x: auto;
		border-left: 0.4em solid cornflowerblue;
		tab-size: 2;
	}

	code:not(pre code), output:not(code:has(output) output) {
		background: #f7f7f7;
		border: 1px solid rgb(0 0 0 / 0.2);
		padding: 0.1rem 0.3rem;
		margin: 0.1rem 0;
		border-radius: 0.2rem;
		display: inline-block;
	}
}