/* Import Shared css files*/
@import url("/resources/CSS/gruvbox-themes.css");
@import url("./fonts.css");
@import url("./scrollbar.css");
@import url("./navbar.css");

/* Remove Padding from body*/
body {
	margin: 0px;
	background-color: var(--gruv-bg);
	font-family: var(--font-sans);
	color: var(--gruv-fg);
}

/* Setup Grid Container*/
.grid-container {
	height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-columns: 2fr 8fr;
	grid-template-rows: 1fr 20fr;
	gap: 0px 0px;
	grid-template-areas:
	"TOPBAR TOPBAR"
	"LINKBAR MAINBODY";
}
.TOPBAR {
	grid-area: TOPBAR;
	background-color: var(--gruv-bg2);
}
.LINKBAR {
	grid-area: LINKBAR;
	background-color: var(--gruv-bg3);
	min-width: 10em;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.LINKBAR a {
	background-color: var(--gruv-aqua-alt-1);
	border: var(--gruv-fg) solid .2em;
	border-bottom: none;
	color: var(--gruv-bg1);
	height: 2em;
	line-height: 2em;
}

.LINKBAR a:last-of-type {
	border-bottom: var(--gruv-fg) solid .2em;
}

.LINKBAR a:hover {
	border: var(--gruv-fg1) solid .2em;
	border-bottom: none;
	background-color: var(--gruv-fg0);
}

.LINKBAR a:last-of-type:hover {
	border: var(--gruv-fg1) solid .2em;
}

.MAINBODY {
	grid-area: MAINBODY;
	overflow-y: scroll;
	padding: 1em;
}

.MAINBODY h2 {
	color: var(--gruv-purple);
}

.MAINBODY a {
	font-weight: bold;
	font-size: large;
	text-decoration: none;
	color: var(--gruv-green-alt-1);
}

.MAINBODY a:hover {
	color: var(--gruv-green);
	text-decoration: underline;
}

.MAINBODY a:focus {
	color: var(--gruv-green);
	text-decoration: underline;
}

.MAINBODY a:visited {
	color: var(--gruv-yellow-alt-2);
}