@import "mixins";
@import "colors";

:root {
	background-color: $mainBackground;
	box-sizing: border-box;
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	color: $mainTextColor;
}

body {
	padding: 0;
	margin: 0;
}

#main:has(#content) {
	display: grid;
	grid-template-columns: $navBarSize 1fr;
	grid-template-areas: "Nav Content";
}

#content {
	$contentPad: 10px;
	grid-area: Content;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	left: $navBarSize;
	height: calc(100dvh - (2 * $contentPad));
	width: calc(100dvw - $navBarSize - (2 * $contentPad));
	padding: $contentPad;
}

a {
	color: $secondaryAccent;
	&:hover {
		color: $secondaryAccentLight;
	}
	&:visited {
		color: $secondaryAccentDark;
	}
}