.Index {
  width: 100vw;
  height: 100vh;
  background: #1a1a1a;
  color: #f0f0f0;
  font-family: monospace;

  display: grid;
  grid-template-columns: auto 40vw auto;
  grid-template-rows: auto auto auto 3em;
  grid-template-areas:
    ". . ."
    ". main ."
    ". . ."
    "footer footer footer";
}

.Index-footer {
  background: #2a2a2a;
  grid-area: footer;
}

.Index-footer > div {
  padding-left: 0.7em;
  padding-top: 0.7em;
}

.Index-nodes {
  grid-area: main;
  background: #2a2a2a;
}

.Index-node {
  margin: 5px;
  padding: 15px;
  background: #1f1f1f;
}

.Index-addwrap {
  margin-top: 5px;
}

/* SingleNode */


.SingleNode-connecting {
  width: 100vw;
  height: 100vh;

  background: #1a1a1a;
  color: #ffffff;
  font-family: monospace;

  display: grid;
  grid-template-columns: auto min-content auto;
  grid-template-rows: auto min-content auto;
  grid-template-areas:
          ". . ."
          ". main ."
          ". . ."
}

.SingleNode-connecting > div {
  grid-area: main;
  padding: 15px;
  white-space: nowrap;
  background: #2a2a2a;
}



/*****/

a:link {
  color: #50f020;
}

a:visited {
  color: #50f020;
}

a:hover {
  color: #30a00a;
}

.Button {
  display: inline-block;
  padding: 15px;
  background: #1f1f1f;
  margin-left: 5px;
}

.Window {
  background: #2a2a2a !important;
  color: #e0e0e0;
}

.Window b {
  color: #f0f0f0;
}

.Window > :first-child > :nth-child(2)::before {
  background: #f0f0f0;
}

.Window > :first-child > :nth-child(2)::after {
  background: #f0f0f0;
}

.Window a:link {
  color: #30a015;
}

.Window a:visited {
  color: #30a015;
}

/* POND */

.Pond-connecting {
  width: 100vw;
  height: 100vh;

  background: #1a1a1a;
  color: #ffffff;
  font-family: monospace;

  display: grid;
  grid-template-columns: auto min-content auto;
  grid-template-rows: auto min-content auto;
  grid-template-areas:
          ". . ."
          ". main ."
          ". . ."
}

.App {
  min-height: 100vh;
  background: #1a1a1a;
  font-family: monospace;
}

.NodeList {
  user-select: text;
  font-family: monospace;
  min-width: 40em;
  display: inline-block;
}

.FullNode {
  user-select: text;
  font-family: monospace;
  min-width: 50em;
  display: inline-block;
}

.FullNode-voucher {
  padding-left: 1em;
}

.StorageNode {
  user-select: text;
  font-family: monospace;
  min-width: 40em;
  display: inline-block;
}

.Block {
  user-select: text;
  font-family: monospace;
  min-width: 60em;
  display: inline-block;
}

.State {
  user-select: text;
  font-family: monospace;
  min-width: 40em;
  display: inline-block;
}

.Client {
  user-select: text;
  font-family: monospace;
  display: inline-block;
}

.CristalScroll {
  display: flex;
  min-width: 100%;
  min-height: 100%;
  overflow: auto;
}

.Consensus {
  font-family: monospace;
}

.ChainExplorer {
  font-family: monospace;
  color: #d0d0d0;
}

.ChainExplorer-at {
  min-width: 40em;
  background: #222222;
}

.ChainExplorer-after {
  background: #440000
}

.ChainExplorer-after:hover {
  background: #770000
}

.ChainExplorer-before {
  background: #444400
}

.ChainExplorer-before:hover {
  background: #777700
}

.Logs {
  width: 100%;
  height: 100%;
}

.Logs-window :nth-child(2) {
  height: 100%;
}