:root {
  --bg: #000000;
  --fg: #c9c9c9;
  --sel: #1f9b92;
  --alt: #002b36;
  --err: crimson;
}

* { scrollbar-color:var(--sel) var(--bg);}
*::-webkit-scrollbar { width:6px;height:6px; }
*::-webkit-scrollbar-track { background:var(--bg); }
*::-webkit-scrollbar-thumb { background-color:var(--sel);border-radius:0;border:none; }
*::-webkit-scrollbar-corner { background:var(--bg); }

body {
  background: var(--bg);
  width: 100vw;
  overflow-x: hidden;
  font-family: monospace;
}

main {
  margin: 2em;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  color: var(--fg);
  background: var(--bg);
}

a {
  color: var(--sel);
}

a:hover {
  color: var(--fg);
}

input {
  background: var(--alt);
  border: none;
  padding: 0.25ch;
  color: var(--fg);
  font-family: monospace;
}

.err {
  color: var(--err);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

main table { border:solid 1px var(--fg);border-collapse:collapse; margin-bottom: 1em;}
main * td, main * th { padding:0.5em;border:solid 1px var(--fg);border-right:dotted 1px var(--fg);border-left:dotted 1px var(--fg);width:auto; }
main * th { font-weight:bold; }

td input {
  width: 10ch;
  text-align: right;
}

button, input[type=submit], select {
  text-transform: uppercase;
  padding: 0.5em;
  border: solid 2px var(--fg);
  background: var(--bg);
}

button:hover, input[type=submit]:hover, select:hover {
  border: solid 2px var(--sel);
  background: var(--sel);
  color: var(--bg);
}

h2 {
  display: inline-block;
  margin-top: 0.5em;
}

#password {
  display: block;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: left;
  background: var(--bg);
}

footer input {
  display: block;
}

summary {
  cursor: pointer;
}

span.err {
  display: block;
}

button.addbtn {
  color: var(--sel);
  background: var(--bg);
  border: none;
}

button.rmbtn {
  color: var(--err);
  background: var(--bg);
  border: none;
}

button.addbtn:hover {
  color: var(--bg);
  background: var(--sel);
  border: none;
}

button.rmbtn:hover {
  color: var(--bg);
  background: var(--err);
  border: none;
}
.addbtn::before, .rmbtn::before {
  content: "[ ";
}

.addbtn::after, .rmbtn::after {
  content: " ]";
}

.addbtn:hover::before, .rmbtn:hover::before {
  content: "[[";
}

.addbtn:hover::after, .rmbtn:hover::after {
  content: "]]";
}

*::selection { background-color:var(--sel);color:var(--bg);;text-decoration:none;text-shadow:none; }