/*-- Styles_StoryPagesGrid --*/

#github grid-container {
  /*-- set page layout --*/
  display: grid;
  grid-template-rows: 3.8em auto 2em;
  grid-template-areas: "header" "main" "footer";
  grid-gap: 0.15em;
  position: absolute;
  top: 1em;
  bottom: 1em;
  left: 1em;
  right: 1em;
  border: 0.15em solid #440000;
  background-color: #440000;
}

#github grid-header {
  grid-area: header;
  display: block;
  padding:0.15em 1em;
  user-select: none;
  width:100%;
}

#github grid-main {
  grid-area: main;
  display: block;
}
/*-- holds responsive elements in main row --*/
#github main-wrapper {
  display: flex;
  height: calc(100vh - 8.40em);
}
/*-- style page menu --*/
#github main-left {
  display: block;
  flex-shrink: 0; /* fix menu width */
  width: 8em;
  padding: 0.5em 0em;
  border-right: 0.15em solid #5c2017;
  border:0.25rem groove orange;
  user-select:none;
  overflow-y: auto;
}
/*-- style menu elements --*/
#github main-left ul {
  list-style: none;
  margin: 0.5em 0.5em;
  padding: 0em 0.5em 0em 0.1em;
}

#github main-left ul li {
  width:max-content;
  margin: 0.1em 0em;
  padding: 0.1em 0em;
}

#github main-left ul li:hover {
  background-color: #ddd;
}

#github main-left ul li a {
  color: #440000;
}
/*- style content -*/
#github main-right {
  display: block;
  flex-grow: 1; /* content width grows with container*/
  padding: 0.5em 1.5em;
  overflow-y: auto;
}

#github grid-footer {
  grid-area: footer;
  display: block;
}
/*-- holds responsive elements in footer*/
#github footer-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  grid-gap: 0.15em;
}
/*-- holds menu toggle button --*/
#github footer-left {
  display: flex;
  width: 10em;
  padding: 0.25em 1.0em;
  cursor: pointer;
  user-select: none;
  border: 1px solid #fef9ee;
  border: 0.15rem groove orange;
}
/*-- holds page section links --*/
#github footer-right {
  display: flex;
  width: 100%;
  user-select: none;
  font-size: 0.80em;
  font-weight: bold;
  align-items: center;
  white-space:nowrap;
  overflow-x: hidden;
}

#github footer-right ul {
  list-style-type: none;
  padding: 0em;
  margin: 0em;
  overflow:hidden;
}

#github footer-right ul > li {
  width: max-content;
  float: left;
  padding: 0em 0.1em;
  margin: 0.25em;
  white-space: nowrap;
}

#github footer-right ul > li:hover {
  background-color: #ddd;
}

#github footer-right ul li a {
  display: block;
  padding: 0em;
  margin: 0em;
  color: #440000;
  cursor: pointer;
}

#github grid-container h2 {
  width: 100%;
}
/*#github .light {
  background-color: #fef9ee;
  color: #5c2107;
}

#github .dark {
  color: #fefefa;
  background-color: #5c2107;
}
*/