@charset "UTF-8";

/* remove all previously existing styling */
*{}

html {
  background-color: #3e3f3e;
  font-family: Arial Narrow;
  font-size: 1.5;
}

html, body {
  height: 100%;
}

.headerNav a {
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.header ul {
  background-color: inherit;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.headerPic img {
  height: 40px;
  align-self: flex-start;
}

li {
  display: inline;
}

/* header */
.item1 {
  grid-area: header;
  top: 0px;
}
.item2 {
  grid-area: leftAside;
  }

.item3 {
  color: white;
  grid-area: main;
  /*overflow: auto;/*
  /*scroll-behavior: smooth; */}


.item4 {
  grid-area: rightAside;
}

/* footer */
.item5 {
  bottom: 0px;
  display: flex;
  flex-wrap: nowrap;
  grid-area: footer;
  justify-content: space-around;
}

body {
  color: white;
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'leftAside leftAside main main main rightAside'
    'footer footer footer footer footer footer';
  gap: 20px;
  padding: 10%;
}

h1 {
    color: #92D050;
}

.footerNav a {
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.footer ul {
  background-color: inherit;
  display: flex;
  flex-direction: column;
  text-align: center;
}