body {
    height: 100svh;
    width: 100svw;
    overflow: hidden;

	font-family: 'Oxygen';
	font-weight: normal;
	line-height: 1.4;

	color: var(--clr-text);

	background: linear-gradient(
		135deg,
		var(--clr-gradient-start) 25%,
		var(--clr-gradient-end) 75%);
}

main {
	/* scrollable content */
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;

    box-sizing: border-box;
	width: 100%;
	height: 100%;

	/* background + shadow */

	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--clr-gradient-start) var(--gradient-darken-factor), #000) 25%,
		color-mix(in srgb, var(--clr-gradient-end) var(--gradient-darken-factor), #000) 75%);

    box-shadow: inset 1vmin -1vmin 10vmin rgba(0, 0, 0, .5);

	/* round */
    border-bottom-right-radius: 3vmin;
    border-bottom-left-radius: 3vmin;
}

main::-webkit-scrollbar { 
	display: none;
}

/* unified content size */
nav, aside, footer {
    font-size: var(--clamp-s-regular);
    padding-block: .5em;
    height: 100%;

    box-sizing: border-box;

	position: relative;
    display: flex;
	gap: 1ch;

	z-index: 1;
}

/* nav */
nav {
	justify-content: flex-start;
	* {
		transform: scale(-1);
	}

	> a {

		> span {
			opacity: 1;
			transition: opacity 250ms ease;
		}

		&::before {
			content:attr(data-text);

			position: absolute;
			display: block;

			z-index: 1;

            text-align: center;
			color: var(--clr-text);
			background-color: var(--clr-text-contrast);
			border-top: .5em solid var(--clr-text-contrast);
			border-bottom: .5em solid var(--clr-text-contrast);
			border-radius: .5em;
			white-space: nowrap;
			pointer-events: none;
			
			opacity: 0;
			transform: rotate(-180deg) translateY(0) scale(-1);
			transition:
				opacity 250ms ease,
				transform 250ms ease;
		}

		&:hover,
		&:focus {
			span {
				opacity: 0.2;
			}

			&::before {
                opacity: 1;
                transform:
					rotate(-105deg)
					translateX(.5em)
					translateY(-50%)
					scale(-1);
			}
		}
	}
}

aside {
    justify-content: center;

	* {
		transform: scale(1);
	}
}

.spacer {
	pointer-events: none;
	letter-spacing: -.375em;
	flex-shrink: 0;
	height: .8em;
	font-size: 1em;

	nav & {
        transform: scale(-1);
	}

	aside & {
        transform: scale(1);
	}
}

/* sidebars */
nav, aside {
	flex-direction: column;
    align-items: center;
    padding-inline: .5em;
	padding-block: 1em;

	* {
		writing-mode: vertical-lr;
	}
}

/* footer */
footer {
	display: flex;
    justify-content: center;
	align-items: center;
	padding-block: .5em;

	ul {
		display: inherit;
		justify-content: inherit;
		align-items: inherit;
		gap: inherit;
		
		list-style: none;
		flex-flow: row wrap;
	}
}

/* base grid setup */
body {
	display: grid;

	grid-template-rows:
		1fr auto;
    grid-template-columns:
		1fr
		min(100svh, calc(100svw - (5.5 * var(--clamp-s-regular))))
		1fr;
    grid-template-areas:
		"nav main aside"
		"nav footer aside";

	nav {
		grid-area: nav;
		margin-left: auto;
	}

	main {
		grid-area: main;
	}

	aside {
		grid-area: aside;
		margin-right: auto;
	}

	footer {
		grid-area: footer;
	}
}