body {
    font-family: sans-serif;
    background: dimgray;
}

footer {
  clear: both;
  font-size: 70%;
  color: silver;
}

footer dl {
  display: inline-grid;
  padding-left: 1em;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}

footer dt, footer dd {
  margin: 0;
}

footer dt::after {
  content: ":";
  margin-right: 1ex;
}

footer dd {
  margin-right: 1ex;
}

footer dd:not(:last-child)::after {
  content: ","
}

.box {
  border: solid 1px silver;
  box-shadow: 4px 4px 7px 0px rgba( 0, 0, 0, 0.2 );
  background: navy;
  color: silver;
}

a {
  text-decoration: none;
  color: inherit;
}

nav a:hover, nav a:hover *, #entry a:hover, #entry a:hover * {
  background: red;
  color: white;
}

header nav {
  padding: 0;
  margin-bottom: 1ex;
}

header nav ul {
  padding-left: 1ex;
  padding-top: 0;
  padding-bottom: 0;
}

header nav ul li {
  display: inline-block;
  color: dimgray;
}

header nav ul li::after {
  content: " |";
  color: silver;
}

header nav a {
  color: white;
  padding-left: 1em;
  padding-right: 1em;
}

header nav span {
  padding-left: 1em;
  padding-right: 1em;
}

#body nav.menu {
  float: left;
  padding-right: 1ex;
  margin-right: 1ex;
  margin-bottom: 1ex;
}

#body nav.menu ul {
  list-style: none;
  padding-left: 1ex;
}

#body nav.menu > ul > li {
  color: white;
}

#body nav.menu > ul > li > ul > li {
  color: silver;
}

#body nav.menu a {
  display: block;
}

nav.seeAlso {
  border-top: solid 1px silver;
  white-space: normal;
  margin-top: 1ex;
}

nav.seeAlso ul {
  padding: 0;
  padding-left: 0.5em;
  margin: 0;
  margin-top: 0.5em;
}

nav.seeAlso ul li:first-child {
  color: white;
}

nav.seeAlso ul li {
  display: inline-block;
  margin-right: 1em;
}

#entry {
  overflow: scroll;
  font-family: 'Roboto Mono', monospace;
  padding: 0.5em;
  margin-bottom: 1ex;
}

#entry pre {
  font-family: inherit;
  margin: 0;
  padding: 0;
}

#entry h1 {
  color: white;
  margin-bottom: 0;
}

#entry ul {
  list-style: none;
  padding-left: 1ex;
  white-space: normal;
}

#entry span.ngb {
  color: white;
}

#entry span.ngu {
  color: fuchsia;
}

#entry a {
  width: 100%;
  display: inline-block;
}


span.bg0 {
    background: black;
}

span.fg0 {
    color: black;
}

span.bg1 {
    background: navy;
}

span.fg1 {
    color: navy;
}

span.bg2 {
    background: green;
}

span.fg2 {
    color: green;
}

span.bg3 {
    background: teal;
}

span.fg3 {
    color: teal;
}

span.bg4 {
    background: maroon;
}

span.fg4 {
    color: maroon;
}

span.bg5 {
    background: purple;
}

span.fg5 {
    color: purple;
}

span.bg6 {
    background: olive;
}

span.fg6 {
    color: olive;
}

span.bg7 {
    background: silver;
}

span.fg7 {
    color: silver;
}

span.bg8 {
    background: gray;
}

span.fg8 {
    color: gray;
}

span.bg9 {
    background: blue;
}

span.fg9 {
    color: blue;
}

span.bg10 {
    background: lime;
}

span.fg10 {
    color: lime;
}

span.bg11 {
    background: aqua;
}

span.fg11 {
    color: aqua;
}

span.bg12 {
    background: red;
}

span.fg12 {
    color: red;
}

span.bg13 {
    background: fuchsia;
}

span.fg13 {
    color: fuchsia;
}

span.bg14 {
    background: yellow;
}

span.fg14 {
    color: yellow;
}

span.bg15 {
    background: white;
}

span.fg15 {
    color: white;
}


@media screen and (max-width: 480px) {

  .box {
    box-shadow: none;
  }

  #body nav.menu {
    float: none;
    margin: 0;
  }

  #entry {
    clear: both;
  }

  header nav {
    padding: 0;
    margin: 0;
    text-align: center;
  }

  header nav ul, header nav ul a, header nav ul span {
    padding: 0;
  }

  header nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  header nav ul li::after {
    content: "";
  }

  #body nav.menu li {
    display: inline-block;
  }

  #body nav.menu a {
    display: inline-block;
    font-size: 80%;
  }

  #body nav.menu ul ul li::after {
    content: " |";
    color: white;
  }

  #entry {
    font-size: 80%;
  }
}

/* base.css ends here */