@layer base {
	.constrain {
		padding-inline: var(--constrained-width);
	}

	.full-width {
		width: 100dvw !important;
		max-width: none !important;
		padding-inline: 0 !important;
		position:relative;
		left: 50%;
		right: 50%;
		margin-inline: -50vw;
	}
	.full-width > * {
		margin-inline: auto;
		padding-inline: var(--constrained-width);
	}
	body:has( .full-width ) {
		overflow-x: hidden;
	}

	@media (min-width: 800px) {
		.body-area:not(.full-width) {
			display: grid;
			grid-template-columns: min(300px,33vw) auto;
			gap: 0;

			main {
				max-width: min( 70ch, calc(100vw - min(300px,33vw)));
			}
		}
	}
}


/* This enables smooth transitions when navigating from one page to another */
@view-transition {
	navigation: auto;
}

html {
	scroll-behavior: smooth;
	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

body {
	interpolate-size: allow-keywords;
}