/*:root  { 
  --color0: #F3EDED;
  --color1: #f5c16c;
  --color2: #df8931;
  --color3: #aa530e;
}
*/

/*palette_02*/
:root  { 
  --color0: #f5f5f5;
  --color1: #e4d7cf;
  --color2: #bead9b;
  --color3: #9f8364;
  --color4: #767563;
}

/*palette_06
:root  { 
  --color0: #ede8dc;
  --color1: #e6d9be;
  --color2: #e0b39d;
  --color3: #c78967;
  --color4: #ab6754;
}
*/
body {
  height: 100vh;
  width: 100vw;
  background-color: var(--color0);
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  height: 100%;
  grid-template-rows: 50px 25px 50px 1fr 30px;
  grid-template-areas: "header_panel"
                       "pageTab_panel"
                       "control_panel"
                       "content_panel"
                       "footer_panel";
}

header {
  grid-area: header_panel;
  background-color: var(--color3);
  color: white;
  display: flex;
  align-items: center;
}

footer {
  grid-area: footer_panel;
  background-color: var(--color3);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

#control_panel {
  grid-area: control_panel;
  background-color: var(--color2);
  display: flex;
  flex-direction: row;
  align-items: center;
}

#content_panel {
  grid-area: content_panel;
  background-color: var(--color0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* header elements*/
#company {
  text-align: left;
  font-size: 1.75em;
  margin-right: auto;
  margin-left: 8px;
}
#uname {font-size: 1.5em; margin: 8px;}
#loginout {
  font-size: 1.5em;
  margin: 8px;
  margin-right: 24px;
  min-width: 75px;
}
/*end of header elements */

/* footer elements */
#footer_text {
font-size: 1em;
font-family: Verdana;
margin: 5px;    
}
/* end of footer elements*/