@media (prefers-color-scheme:light) {
  :root {
    --color1: #ffffff;
    --color2: var(--blacktextcolor);
    --colorHover: #cdcdcd;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --color1: #313131;
    --color2: var(--whitetextcolor);
    --colorHover: #5a5a5a;
  }
}
#qrCode img {
  width: 20em;
  height: 20em;
  image-rendering: pixelated;
  margin: 1em;
}
#maindisplay {
  min-height: 22em;
}
label {
  font-family: 'BlenderPro', monospace;
  /* margin-left: 1em; */
}
input.qrInput {
  height: 2rem;
  /* min-width: 5rem; */
  padding: 0 1em;
  margin: 0.5em 0;
  color: var(--textcolor);
  font-family: 'BlenderPro', monospace;
  font-size: 1em;
  box-shadow: none;
  background-color: var(--color1);
  border-radius: 0;
  border: 2px solid var(--color2);
}
input[type="color"] {
  min-width: 3rem;
  padding: 0 0.25em;
}
select {
  appearance: none;
  height: 2rem;
  padding: 0 1em;
  margin: 0;
  color: var(--textcolor);
  font-family: 'BlenderPro', monospace;
  font-size: 1em;
  box-shadow: none;
  background-color: var(--color1);
  border-radius: 0;
  border: 2px solid var(--color2);
}
.options {
  flex-direction: column;
}
button#generate {
  all: unset;
  height: 2rem;
  padding: 0 1em;
  margin: 1.5em 0;
  color: var(--textcolor);
  font-family: 'BlenderPro', monospace;
  font-size: 1em;
  box-shadow: none;
  background-color: var(--color1);
  border-radius: 0;
  border: 2px solid var(--color2);
}
button#generate:hover {
  background-color: var(--colorHover);
  border-radius: 0;
  border: 2px solid var(--color2);
  transition: 0.3s;
}
#resolutionInput {
  width: 3em;
}