body, * {
  background-color: #202020;
  color: white;
  font-family: Comic Sans MS;
  margin: 2px;
  padding: 0 4px;
}

div {
  margin: 8px;
}

input, textarea, button, .tile {
  border: 1px solid #404040;
}

textarea {
  font-family: monospace;
}

button {
  padding: 0.5em 1em;
  background-color: #606060;
  border-radius: 8px;
}
button:hover {
  background-color: #808080;
}
button:active {
  background-color: #404040;
}

input, textarea {
  background-color: black;
}

#delay-label {
  font-size: small;
}
input {
  font-size: large;
}

table {  
  border: 2px solid #808080;
  border-collapse: collapse;
}

button:hover {
  cursor: pointer;
}

#delay {
  width: 4em;
}

.tile {
  padding: 0;
  width: 16px;
  height: 16px;
  background-color: black;
}

.tile.palette .color {
  width: 24px;
  height: 24px;
  margin: 6px;
  border: 2px solid #808080;
}
.tile.palette:hover {
  cursor: pointer;
}
.tile.palette:hover .color {
  width: 28px;
  height: 28px;
  margin: 4px;
}
.tile.palette:active .color {
  width: 24px;
  height: 24px;
  margin: 6px;
}
.tile.palette:not(:hover) .color.selected {
  width: 30px;
  height: 30px;
  margin: 3px;
}
.tile.color.selected {
  border: 2px solid white;
}