*,
::before,
::after {
	box-sizing: border-box;
}

html {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		system-ui,
		Roboto,
		'Helvetica Neue',
		Arial,
		sans-serif,
		Apple Color Emoji,
		'Segoe UI Emoji',
		'Segoe UI Symbol',
		'Noto Color Emoji';
}

body {
	min-height: 100vh;
	max-width: 800px;
	margin: 0 auto;
	padding: 10px;
	display: grid;
	gap: 3vw;
	grid-template-rows: min-content 1fr min-content;
}

a {
	color: currentColor;
}

footer {
	border-top: 2px dotted;
	text-align: center;
}

header {
	border-bottom: 2px dotted;
}

.template-homepage main {
	text-align: center;
}

.skip-link {
    position: absolute;
    top: -30px;
}

.skip-link:focus-visible {
    top: 5px;
}

.page-form label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

.page-form :is(textarea, input, select) {
    width: 100%;
    max-width: 500px;
    min-height: 40px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.page-form .helptext {
    font-style: italic;
}