/* reset rules based on Josh's Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; font-weight: inherit }


:root {

	--font-default-family: 'Dazzed', system-ui, sans-serif;
	--font-default-weight: 400;
	--font-default-weight-semibold: 500;

	--font-default-size: 20px;
	--font-default-lineheight: 1.3;

	--font-footer-size: 16px;

	--color-black: #000;
	--color-white: #fff;
	--color-moss-light: #cbd1c1;

	--color-background: var(--color-white);
	--color-text: var(--color-black);
	--color-highlight: var(--color-moss-light);

	--spacing: 40px;
	--spacing-double: calc(var(--spacing) * 2);

	--body-min-width: 320px;

	--footer-height: 60px;

}

body {
	font-family: var(--font-default-family);
	font-weight: var(--font-default-weight);
	font-size: var(--font-default-size);
	line-height: 1;

	background: var(--color-background);
	color: var(--color-text);

	min-width: var(--body-min-width);
}

small {
	font-size: 0.8em;
}

b, strong {
	font-weight: var(--font-default-weight-semibold);
}

i, em {
	font-style: inherit;
}

a {
	color: inherit;
	text-decoration: none;
	font-weight: var(--font-default-weight-semibold);
}

	a:hover {
		text-decoration: underline;
	}

	@media (prefers-reduced-motion: no-preference) {
		a {
			transition: all 200ms ease-in-out;
		}
	}

.button {
	background: var(--color-highlight);
	color: var(--color-black);
	border-radius: 5px;
	display: inline-block;
	padding: 10px 20px;
	font-size: 1.3em;
	text-decoration: none;
	font-weight: var(--font-default-weight-semibold);
}

	.button:hover {
		background: var(--color-black);
		color: var(--color-highlight);
		text-decoration: none;
	}

.content {
	line-height: var(--font-default-lineheight);
}

.content * + p {
	margin-top: 1em;
}

.columns {
	display: flex;
	gap: 40px;
}

	.columns .column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

.canvas {
	padding: var(--spacing-double) 0;
	min-height: calc(100vh - var(--footer-height));
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-content {
	width: 100%;
}

.width {
	padding: 0 20px;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.header {
}

	.header .logo-h1,
	.header .logo-h2 {
		font-weight: var(--font-default-weight-semibold);
		font-size: 2.6em;
		line-height: 1.2;
		text-wrap: balance;
	}

	.header .logo-h1 {
		max-width: 400px;
	}

	.header .logo-h2 {
		max-width: 900px;
		margin-bottom: var(--spacing-double);
	}

	.header .logo-h1 span {
		background-color: var(--color-highlight);
	}

	.header .logo-h1 a {
		text-decoration: none !important;
	}

		.header .logo-h1 a:hover span {
			background-color: var(--color-black);
			color: var(--color-highlight);
		}

.content {
}

	.content h1 {
		font-weight: var(--font-default-weight-semibold);
		font-size: 2em;
		line-height: 1.2;
		margin: 0;
		text-wrap: balance;
	}

	.content h2 {
		font-weight: var(--font-default-weight-semibold);
		font-size: 1.5em;
		line-height: 1.2;
		margin: 1.5em 0 0;
		text-wrap: balance;
	}

	.branding {
		margin-top: 1em;
		opacity: 0.5;
	}

	@media( max-width: 560px ) {

		.content h1,
		.content h2,
		.header .logo-h1,
		.header .logo-h2 {
			overflow-wrap: break-word;
			hyphens: auto;
			-webkit-hyphens: auto;
			hyphenate-limit-chars: 5 2 2;
			max-width: unset;
			text-wrap: wrap;
		}

	}

.content .button-wrapper {
	margin: var(--spacing-double) 0;
}

.content ul {
	margin-top: 1em;
}

	.content ul li + li {
		margin-top: 0.5em;
	}

.footer {
	height: var(--footer-height);
	padding: 20px;
	font-size: var(--font-footer-size);
}

	.footer ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 1rem;
		justify-content: flex-end;
	}

	.footer a {
		font-weight: inherit;
	}

		.footer .current-menu-item a {
			text-decoration: underline;
		}

@media ( max-width: 940px ) {

	:root {
		--font-default-size: 18px;
	}

	h1, h2 {
		font-size: 2em;
	}

	h1 {
		max-width: 300px;
	}

	h2 {
		max-width: unset;
	}

}

@media ( max-width: 740px ) {

	.columns {
		display: block;
	}

		.columns .column + .column {
			margin-top: 1em;
		}

}

@media ( max-width: 440px ) {

	:root {
		--font-default-size: 16px;
		--font-footer-size: 14px;
		--spacing: 20px;
	}

	h1, h2 {
		font-size: 1.6em;
	}

	h1 {
		max-width: 230px;
	}

}