/*
 * === Palette Sources ===
 *   https://colorhunt.co/palette/222831393e46fd7014eeeeee
 *   https://colorhunt.co/palette/3932324d45458d6262ed8d8d
 *   https://colorhunt.co/palette/222831393e46ffd369eeeeee
 *   https://colorhunt.co/palette/0f0e0e5412128b9a46eeeeee
 *   https://colorhunt.co/palette/6e85b7b2c8dfc4d7e0f8f9d7
 */

:root {
  --color-gray-dark: #222831;
  --color-gray-med:  #393E46;
  --color-gray-lite: #EEEEEE;
  --color-red:       #8D6262;
  --color-yellow:    #FFD369;
  --color-green:     #8B9A46;
  --color-blue:      #C4D7E0;
}

body {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  flex-flow: column nowrap;
  margin: 0px;
  padding: 0px;
  gap: 0px;
  align-items: stretch;
  background-color: var(--color-gray-dark);
}

#index-menu {
  flex-shrink: 1;
  display: flex;
  flex-flow: row nowrap;
  margin: 0px;
  padding: 0px;
  gap: 0px;
  align-items: stretch;
  border-bottom: 3px solid var(--color-gray-med);
}

#index-menu > span {
  flex-grow: 1;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

#index-menu > span:hover {
  background-color: var(--color-gray-med);
}

#index-menu > span > span.material-icons {
  margin: clamp(2vh, 15px, 5vh);
  filter: invert() brightness(93%);  /* 93% is approximately #EEEEEE */
}

#index-main {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: center;
  padding: 20px;
}

#index-main-default {
  flex-shrink: 1;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-med);
  font-family: "Fira Mono", Inconsolata, Consolas, "Roboto Mono", monospace;
  font-size: clamp(12pt, 10vw, 120pt);
  letter-spacing: 5px;
  user-select: none;
}

#index-main-default > span:hover {
  color: var(--color-gray-lite) !important;
}

#index-main-menu {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: stretch;
  color: var(--color-gray-lite);
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
}

#index-main-menu-header {
  padding: 10px;
  font-size: 1.5em;
  text-decoration: underline;
  user-select: none;
}

#index-main-menu-list, #index-main-menu-list ul {
  list-style-type: none;
  display: flex;
  flex-flow: column nowrap;
  justify-content: start;
  margin: 0px;
  padding: 0px;
}

#index-main-menu-list li {
  padding-left: 24px;
}

#index-main-menu-list span {
  display: block;
  padding: 10px;
  cursor: pointer;
  user-select: none;
}

#index-main-menu-list span:hover {
  background-color: var(--color-gray-med);
}

#index-main-menu-list .hier-expand::before {
  content: "\FF0B";
  display: inline-block;
  margin-right: 6px;
}

#index-main-menu-list .hier-expanded::before {
  content: "\FF0D";
}

#index-main-menu-list .hier-nested {
  display: none;
}

#index-main-menu-list .hier-nested-active {
  display: flex;
}

#index-main-about {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  align-items: start;
  justify-content: start;
  gap: 20px;
  color: var(--color-gray-lite);
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
}

#index-main-about > span {
  font-size: 1.5em;
  text-decoration: underline;
}

#index-main-about span.material-icons {
  font-size: 90%;
}

#index-main-about > p {
  margin: 0px;
  padding-left: 10px;
}

#index-main-about > ul {
  margin: 0px;
}

#index-main-about a {
  color: var(--color-gray-lite);
  text-decoration: none;
  user-select: none;
}

#index-main-about .darken {
  opacity: 50%;
}

#index-main-acc-gh, #index-main-acc-repl {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: start;
  gap: 20px;
  color: var(--color-gray-lite);
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: 2em;
  text-align: center;
}

#index-main-acc-gh > a, #index-main-acc-repl > a {
  color: var(--color-gray-lite);
  user-select: none;
}

#index-main-acc-gh span, #index-main-acc-repl span {
  text-decoration: underline;
}

#index-main-acc-repl > img {
  filter: brightness(150%);
}

#index-main-repo-e3 {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: start;
}

#index-main-repo-e3 > p:nth-child(1) {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#index-main-repo-e3 > p:nth-child(2) {
  color: var(--color-gray-lite);
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  text-align: center;
}

#index-main-repo-e3-img {
  image-rendering: pixelated;
}

#index-main-repo-e3-link {
  color: var(--color-gray-lite);
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: 1.5em;
  user-select: none;
}

#index-main-repo-e3-link > span {
  text-decoration: underline;
}

#index-main-repo-mla {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: stretch;
}

#index-main-repo-mla > iframe {
  flex-grow: 1;
}

#index-main-repo-twr {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

#index-main-repo-twr > a {
  flex-shrink: 1;
  display: inline-block;
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: 2em;
  text-decoration: none;
  user-select: none;
}

#index-main-repo-twr > a:nth-child(1) {
  color: var(--color-gray-lite);
}

#index-main-repo-twr > a:nth-child(2) {
  color: var(--color-gray-med);
}

#index-main-repo-mrsq {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

#index-main-repo-mrsq > a {
  flex-shrink: 1;
  display: inline-block;
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: 2em;
  text-decoration: none;
  user-select: none;
}

#index-main-repo-mrsq > a:nth-child(1) {
  color: var(--color-gray-lite);
}

#index-main-repo-mrsq > a:nth-child(2) {
  color: var(--color-gray-med);
}

#index-main-repo-162v {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
}

#index-main-repo-162v > iframe {
  flex-grow: 1;
}

#index-main-repo-162v > a {
  flex-shrink: 1;
  display: inline-block;
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  text-decoration: none;
  user-select: none;
}

#index-main-repo-162v > a:nth-of-type(1) {
  color: var(--color-gray-lite);
}

#index-main-repo-162v > a:nth-of-type(2) {
  color: var(--color-gray-med);
}

#index-main-repo-caf {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: stretch;
}

#index-main-repo-caf > iframe {
  flex-grow: 1;
}