@charset "utf-8";

/*this gave me many issues with the grid system and spacing and alignment i refered to the texts and some w3 schools articles and proper formatting*/

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: 9fr 27fr;
  gap: 9px;
  background-color: green;
  padding: 15px;
}
.container div {
  background-color: gray;
  padding: 20px;
}
.container div.header {
  grid-area: header;
  text-align: center;
}
.container div.menu {
  grid-area: menu;
}
.container div.content {
  grid-area: content;
}
.container div.footer {
  grid-area: footer;
  text-align: left;  
}
/* this gave me a lot of headache to figure out to apply properly*/
h1 {
	color: white;
}
p {
	color: white;
}
content {
	color: white;
}
h2 {
	color: white;
}
h3 {
	color: white;
}
body {
	background-image: url('ncwoods.jpg');
}
aside {
	border-radius: 5px;
	Background-color: white;
	padding: 5px;