style.css

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: normal;
  src: local('Lobster1.4'), local('Lobster'), url('https://themes.googleusercontent.com/font?kit=TSDaXhyJuDJ-NBU0popSWA') format('truetype');
}

:root {
	--font-mono: Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
}

html {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(to right, #fed 50%, #fdc 0);
	background-size: 100px;
}

body {
	background: radial-gradient(closest-side, hsl(0 0% 100% / .5) 80%, hsl(0 0% 100% / 0));
	padding: 4em;
	font-family: Lobster, sans-serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,.3);
	font-size: 200%;
	max-width: 750px;
	margin: auto;
}

a {
	color: inherit;
}

h1 {
	font-size: 280%;
	color: #f08;
	margin-top: 0;
	text-align: center;
}

textarea, pre, code {
	font-family: var(--font-mono);
}

textarea {
	font-size: 75%;
	width: 100%;
	height: calc(3 * 1.5em);
	line-height: 1.5;
	background: transparent;
	border: 0;
	padding: .5em .6em .4em;
	box-shadow: .05em .05em .25em rgb(0 0 0 / .3) inset;
}

details md-block {
	font: 1rem/1.5 system-ui, Helvetica Neue, sans-serif;
	text-shadow: none;
}

details md-block pre {
	background: white;
	padding: .5em .7em;
	border-radius: .3em;
	overflow: auto;
}

footer {
	display: block;
	font-size: 60%;
	text-align: center;
}

md-block header {
	display: none;
}