@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;
}


ul#menu-main {
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;

	li {
		margin: 0; padding: 0;
		display: contents;
	}
	a {
		display: block;
		text-decoration: none;
		padding: 1em 1.5em;
		margin-block-end: 6px;
		font-family: var(--font-headings), 'sans-serif';
		font-size: 24px;
		background: var(--color-ice);
		color: var(--color-lipstick);
		position: relative;
		transition: .25s color;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 1em;
			height: 100%;
			background: hsl( 0 0% 0% / .2 );
			transition: .25s width;
		}
		&:hover {
			color: var(--color-sky-blue);
			-webkit-text-stroke: 1px black;
			&::after {
				width: 1.5em;
			}
		}
	}

}

.toggle-sidebar {
	padding: .8em 1.5em;
	background-color: hsl( 0 0% 100% / .1 );
	border-radius: 100px;
	display: none;
	width: max-content;
	margin: 0 auto 1.5em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: .9em;

	svg {
		width: 1.4em;
		height: 1.4em;
		fill: currentColor;
		padding-right: .75em;
		vertical-align: text-bottom;
	}

	._showing {
		display: none;
	}

	&._active {
		._hidden {
			display: none;
		}
		._showing {
			display: inline;
		}
	}
}

@media( width < 800px ) {
	.toggle-sidebar {
		display: block;
	}
	ul#menu-main {
		height: 0;
		overflow: hidden;
		transition: height 300ms;
	}
	.sidebar:has( .toggle-sidebar._active ) ul#menu-main {
		height: auto;
	}
}

.footer-inner {
	width: 66vw;
	margin: 2em auto 2em auto;
	border-radius: 120px 30px 100px 20px/30px 120px 40px 60px;
	padding: 3em 1em 5em;
	font-size: 18px;
	color: var(--color-slate);
	font-weight: 200;
	background: hsl( 0 0% 100% / .1 );
	border-left: 20px solid hsl( 0 0% 0% / .1 );

	h1 {
		font-size: 4em;
		margin: 0;
		text-align: center;
	}

	@media (min-width: 800px) {
		width: max-content;
		padding-inline: 3em;

		h1 {
			font-size: 8em;
		}
	}
}