:root {
	--main-color-hs: 200 50%;
	--main-color: hsl(var(--main-color-hs) 50%);
}

body {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	margin: 0;
	font: 120%/1.5 system-ui, sans-serif;
}

a {
	color: hsl(var(--main-color-hs) 40%);
}

	a:visited {
		color: hsl(310 50% 40%);
	}

code {
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

body > header,
main,
body > footer {
	padding: 1.5rem clamp(1rem, 50vw - 20rem, 20vw);
}

body > header {
	background: var(--main-color);
	color: white;
	text-align: center;
}

	header h1 {
		margin: 0;
		font-size: 500%;
	}

	header h2 {
		margin: 0;
	}

main {
	flex: 1;
}

body > footer {
	background: hsl(200 20% 90%);
}

a:is(:empty, .append-url)[href]:not([href=""])::after {
	content: "tadata.org" attr(href);
}