@import "/assets/css/common.css?2";

:root {
	--logo-height: 16rem;
	--logo-left: calc(var(--logo-height) / ((2) * (1.732050808)));
	--page-boundary: 40rem;
}

main {
	/* on small screens, 0rem, on large screens, 4rem*/
	margin: clamp(0rem, calc(50% - var(--page-boundary)), 4rem);

	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.contact {
	flex: 1 1 auto;
	background-color: var(--white-50);
	margin-left: clamp(0rem, calc(50% - var(--page-boundary)), var(--logo-left));
	max-width: 80ch;
}

.contact > .content {
	margin: 1rem;
}