@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-top is set to -1 so the text goes under the ripple*/
	margin: clamp(-1rem, calc(50% - var(--page-boundary)), 4rem) clamp(0rem, calc(50% - var(--page-boundary)), 4rem) clamp(0rem, calc(50% - var(--page-boundary)), 4rem);

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

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

.terms .text {
	margin: 1rem;
	text-align: justify;
}