body {
  font-family: Verdana;
}

code {
  background-color: inherit;
}

p code, ul code, ol code {
  color: #339;
  font-weight: 500;
  font-size: 1.1em;
}

pre {
  border: 1px solid grey;
  background-color: #FFF;
}

table {
  font-family: 'Source Code Pro', 'Lucida Console', monospace;
  border: 3px solid black;
  background-color: hsla(204, 100%, 50%, 5%);
}

thead {
  color: white;
  background-color: #1565C0;
}

table td, table th { padding: 0.25em 0.5em; }

p.error, p.warning, p.info {
  padding: 0.5em;
}

p.error {
  border: 1px solid hsla(0, 100%, 50%, 100%);
  background-color: hsla(0, 100%, 50%, 5%);
}

p.warning {
  border: 1px solid hsla(50, 100%, 50%, 100%);
  background-color: hsla(50, 100%, 50%, 5%);
}

p.info {
  border: 1px solid hsla(80, 100%, 50%, 100%);
  background-color: hsla(80, 100%, 50%, 5%);
}

:root {
    --rainbow1: #cc1616; 
    --rainbow2: #dd9606;
    --rainbow3: #ead320;
    --rainbow4: #1cb22d;
    --rainbow5: #1c83b2;
    --rainbow6: #7a22c1;
    --rainbow7: #c121b3;
}

li a i { color: var(--rainbow1); }
li + li a i { color: var(--rainbow2); }
li + li + li a i { color: var(--rainbow3); }
li + li + li + li a i { color: var(--rainbow4); }
li + li + li + li + li a i { color: var(--rainbow5); }
li + li + li + li + li + li a i { color: var(--rainbow6); }
li + li + li + li + li + li + li a i { color: var(--rainbow7); }
li a:hover i { color: #212121; }



div.avatar img {
  box-shadow: 0 0 0 2px var(--rainbow6),
              0 0 0 4px var(--rainbow5),
              0 0 0 6px var(--rainbow4),
              0 0 0 8px var(--rainbow3),
              0 0 0 10px var(--rainbow2),
              0 0 0 12px var(--rainbow1);
}