/*------------------------------------*\
	#LAYOUT
\*------------------------------------*/

/*= Top sections =*/

body
{
	background-color: var(--color-dark);
}

main
{
	width: var(--full-width);
	height: var(--full-height);
	overflow: hidden;
}

main > section
{
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	background-color: var(--color-light);

	& > :where(header, footer)
	{
		flex-grow: 0;
		width: 100%;
		overflow-y: hidden;
		overflow-x: auto;
		padding: var(--spacing-dsm) var(--spacing-dmd);

		display: grid;
		grid-gap: var(--spacing-dxs) var(--spacing-dsm);
		align-items: center;
		justify-content: center;
		align-content: center;
	}

	& > header
	{
		grid-template-columns: 1fr auto 1fr;
		justify-items: center;

		& > :not(nav, menu):only-child { grid-column-start: span 3; }
		
		& > button:first-child,
		& > :where(nav, menu)._start
		{
			justify-self: start;
			grid-column-start: 1;
		}

		& > :where(nav, menu)._end
		{
			justify-self: end;
			grid-column-start: 3;
		}
		
		:where(nav, menu, ul)
		{
			display: flex;
			gap: var(--spacing-dxs);
		}

		li { list-style-type: none; }
	}

	& > footer
	{
		grid-template-columns: 1fr;
	}
}



/*= Responsivity =*/
:root {
	--full-width: 100vw;
	--full-height: 100vh;
}

@media screen and (orientation: landscape) and (min-width: 40em) and (max-width: 48em) {
	:root {
		--full-width: 100vh;
		--full-height: 100vw;
	}
	body {
		transform: rotate(-90deg);
		transform-origin: left top;
		width: var(--full-width);
		height: var(--full-height);
		overflow-x: hidden;
		position: absolute;
		top: 100%;
		left: 0%;
	}
}

@media (orientation: landscape) and (min-width: 48em) {
	:root
	{
		--full-width: 56.25vh;
		--full-height: 100vh;
	}

	main
	{
		position: absolute;
		left: calc((100vw - var(--full-width)) / 2);
	}
}