body {
  --dark-background-color: #313338;
  --dark-foreground-color: white;

  --light-background-color: #ffffff;
  --light-foreground-color: black;

  --theme-background-color: var(--dark-background-color);
  --theme-foreground-color: var(--dark-foreground-color);

  font-family: sans-serif;
  background-color: var(--theme-background-color);
}

body * { color: var(--theme-foreground-color); }

body>div {
  width: 75%;
  margin: 0 auto;
}

input { color: black; }
button { color: black; }

color-chip {
  width: fit-content;
}
#chip-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 3em;
}

#inputPanel {
  width: 30%;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 2fr);
  row-gap: 0.5em;
  justify-items: start;
  align-items: center;
}
#inputPanel label {
  justify-self: end;
  white-space: nowrap;
}
#inputPanel label::after {
  content: ': ';
  margin: 0 0.2em;
}

#colorAdder {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 1fr;
  column-gap: 0.5em;
  row-gap: 0.2em;
  justify-items: start;
}
#newColorInput { width: 100%; }
#contrastPreview { width: 100%; }
#colorAdder :nth-child(odd) {
  justify-self: end;
}