body {
  background-color: black;
  color: white;
  margin: 0;
  overscroll-behavior: none;
  touch-action: none;
  font-size: 14pt;
  font-family: monospace;
}
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
main {
  max-width: 90%;
  min-width: 50%;
  width: 40em;
  margin: auto;
  padding-bottom: 1em;
}
form {
  text-align: center;
}
input {
  border: 2px solid white;
  border-radius: 4px;
  background-color: black;
  color: white;
  font-size: 14pt;
  font-family: monospace;
}
li {
  display: inline-block;
}
li:before {
  vertical-align: middle;
  background-image: url('tiles.png');
  background-position: -0px -224px;
  background-size: 800%;
  content: " ";
  display: inline-block;
  width: 32px;
  height: 32px;
}
li:nth-child(1):before {
  content: none;
}
ul.nutrient li:nth-child(3):before {
  background-position: -32px -224px;
}
ul.nutrient li:nth-child(4):before {
  background-position: -64px -224px;
}
ul.nutrient li:nth-child(5):before {
  background-position: -96px -224px;
}
ul.flavour li:nth-child(2):before {
  filter: invert(83%) sepia(76%) saturate(302%) hue-rotate(306deg) brightness(300%) contrast(101%);
}
ul.flavour li:nth-child(3):before {
  filter: invert(72%) sepia(23%) saturate(4876%) hue-rotate(311deg) brightness(103%) contrast(120%);
}
ul.flavour li:nth-child(4):before {
  filter: invert(80%) sepia(63%) saturate(368%) hue-rotate(60deg) brightness(300%) contrast(87%);
}
ul.flavour li:nth-child(5):before {
  filter: invert(52%) sepia(86%) saturate(1371%) hue-rotate(222deg) brightness(100%) contrast(104%);
}