/*-- Styles_StoryPagesGrid --*/

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

#github grid-header {
  grid-area: header;
  display: block;
  padding:0.15rem 1rem;
  user-select: none;
}

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

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

#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.5rem 1.5rem;
  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.15rem;
}
/*-- holds menu toggle button --*/
#github footer-left {
  display: flex;
  width: 10rem;
  padding: 0.25rem 1.0rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid #fef9ee;
}
/*-- holds page section links --*/
#github footer-right {
  display: flex;
  width: 100%;
  user-select: none;
  font-size: 0.80rem;
  align-items: center;
  white-space:nowrap;
  overflow-x: hidden;
}

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

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

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

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

/*#github .light {
  background-color: #fef9ee;
  color: #5c2107;
}

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