#pageRootStyles {
	padding-top: 10px;
	background-color: black;
	color: blanchedalmond;
}
h2, h3, h4, h5 {
	text-shadow: 2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;
}
h1 {
	 color: #884433;
	 text-shadow: 2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;
}
#navBarStyle {
	 display: flex;
	border-bottom: solid 1px black;
	width: 100%;
	background-color: maroon;
	list-style-type: none;
	gap: 5px;
	padding: 0;
	margin: auto;
}
#innerBox {
	padding: 5px;
	margin: auto;
	background-color: darkolivegreen;
	border: inset 5px brown;
	width: 80%;
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	grid-template-columns: 25% 1fr;
	grid-template-areas: 
		"header header"
		"navbar navbar"      
		"topbar topbar"      
		"sidebar content"     
		"footer footer";      
	min-height: 100vh;
}
#headerBox {
	 padding-top: 0px;
	 padding-left: 20px;
	 padding-bottom: 0px;
	 background-color: #335533;
	 border-bottom: solid 1px black;
	 text-align: left; 
	 text-align: top;
	 grid-area: header;
}
#navBarBox {
	 border: solid 1px red;
	 text-align: center;
	 grid-area: navbar;
}
a:link {
  color: orange;
  text-decoration: none;
	 text-decoration: bold;
}
a:visited {
  color: orange;
	 text-decoration: none;
	 text-decoration: bold;
}
a:hover {
	 color: red;
	 text-decoration: underline;
	 text-decoration: bold;
}
a:active {
	 color: whitesmoke;
	 text-decoration: none;
	 text-decoration: bold;
}
#scrollBar {
	 padding: 0px;
	 margin: 0;
	 background-color: darkblue;
	 text-align: center;
	 grid-area: topbar;
}
#asideBox {
	 padding-left: 10px;
	 padding-right: 2px;
	 background-color: #335533;
	 text-align: left;
	 border-bottom: solid 8px darkolivegreen;
	 grid-area: sidebar; /* Assign to row 4, column 1 */
}
#mainContent {
	padding-left: 20px;
	padding-right: 20px;
	border-top: solid 8px #335533;
	text-align: left;
	grid-area: content; /* Assign to row 4, column 2 */
}
#footerBox {
	background-color: #335533;
	text-align: center;
	grid-area: footer;
}