#colorPickerDiv {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  max-width: 600px;
}

*:focus {
  border-radius: 0;
  outline: none;
}

#colorSwatches {
  width: max-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.5rem 0;
}

.groupedSwatches {
  display: flex;
}

.bigSwatch {
  border: 2px solid light-dark(var(--color4), var(--color2));
  border-radius: 0.5rem;
  box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  margin: 0 0.25rem;
  padding: 0;
  text-align: center;
}

.bigSwatch h3,
.bitSwatch .h3 {
  margin: 0.5rem 0;
  columns: light-dark(var(--color1), var(--color5));
}

.swatch .swatchInfo {
  padding: 0.1em;
}

.hexCodes {
  color: light-dark(var(--color2), var(--color2));
  margin: 0.5rem;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-color-swatch {
  border: 0;
  border-radius: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
  border: 0;
}

::-moz-focus-inner {
  padding: 0;
}

input[type="color"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 5em;
  padding: 0;
  width: 5em;
  border: 1.5px solid light-dark(var(--color5), #000 );
}

/* MEDIA QUERIES */
@media screen and (max-width: 500px) {
  /* Smartphone */
  input[type="color"] {
    height: 3em;
    width: 3em;
  }
}