:root { 
	--color-brand: oklch(.508 .118 165.612); 
}

html { color-scheme: light dark; margin: 0; padding: 0;}

body { 
	display: flex;
	flex-direction: column;
	height: 100svh;
	font-family: 'PT Mono', monospace;
	font-size: 1.15rem;
	line-height: 1.5; 
	max-width: 80ch; 
	margin: 0 auto; 
}

.masthead {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
}

.masthead__image {
	height: 32px;
	width: 32px;
	border-radius: 4px;
}

main { flex: 1; padding: 1rem; text-align: center; max-width: 51ch; margin: 0 auto; }

img { display: block; width: auto; margin: 0 auto; max-height: 400px;}

footer { 
	color: gray; 
	padding: 1rem; 
	font-family: system-ui, sans-serif;
	text-align: center;
	font-size: 0.8rem;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: var(--color-brand);
}

button, a.button {
	font-size: 1rem;
	border: none;
	padding: 0.5rem 1rem;
	background-color: var(--color-brand);
	border-radius: 6px;
	color: white;
	text-decoration: none;
	max-width: fit-content;
	font-family: system-ui, sans-serif;
	font-weight: bold;
}

button:hover, a.button:hover {
	cursor: pointer;
	background-color: #065f46;
}