style.css

body {
  font-family: 'VT323', monospace;
  margin: 30px 0px;
  background-color: black;
  color: #ccc;
}

h1 {
  border-bottom: 2px solid #17a2b8;
}
h2 {
  /* margin: 0; */
  font-size: 1.5em;
  text-align: center;
  /* border-bottom: 1px solid #17a2b8; */
}
h3 {
  /* margin: 0; */
  font-size: 1.2em;
  text-align: center;
}

p {
  font-size: 1.1em;
}

.rules-container {
  height: calc(100vh - 60px);
}

.content {
  height: calc(100vh - 60px);
}

.item {
  /* background-color: black;
  color: white; */
  width: 80px;
  height: 80px;
  margin: 10px;
  /* text-align: center; */
}

.highlighted {
  border: 2px solid #ccc;
}

.collected {
  opacity: 0.2;
}

canvas {
  height: calc(100vh - 90px);
  width: calc((2 / 3) * calc(100vh - 90px));
  margin: 0px 50px;
}

.control button {
  margin: 10px;
}

span.dark-blue {
  color: rgb(51, 102, 255);
}
span.light-blue {
  color: rgb(153, 179, 255);
}
span.pink {
  color: rgb(255, 102, 153);
}
span.chartreuse {
  color: rgba(127, 255, 0, 0.9);
}
span.lila {
  color: rgb(204, 51, 255);
}

/* .box {
  border: 1px solid red;
} */