style.css

* {
  /*Top Right Bottom Left*/
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

@font-face {
  font-family: Arcology;
  src: url("fonts/Arcology.ttf");
}
@font-face {
  font-family: VCR_OSD;
  src: url("fonts/VCR_OSD_MONO_1.001.ttf");
}
@font-face {
  font-family: D_D;
  src: url("fonts/DisposableDroidBB.ttf");
}
@font-face {
  font-family: D_D_I;
  src: url("fonts/DisposableDroidBB_ital.ttf");
}

body {
  background-color: black;
  --modeValue: 255;
  --x: 1;
  --y: 1;
  --g1: #f0ec2e;
  --g2: #b5a926;
  --g3: #f7fac8;
  --s1: #b6baba;
  --s2: #8c8d8f;
  --s3: #e6e8e7;
  --b1: #f07026;
  --b2: #96461e;
  --b3: #f5d7b3;
  --u1: #000000;
  --u2: #000000; /* for a slight gradient on the unsolved levels */

  overflow: hidden;
  font-family: D_D;
  color: rgb(45, 45, 45);
}

canvas {
  position: absolute;
  left: calc((100% - var(--unit) * var(--width)) / 2);
  top: calc((100% - var(--unit) * var(--height)) / 2);
  background-color: rgba(0, 0, 0, 0);
  /* filter: grayscale(100%); */
}

p {
  color: black;
  font-size: calc(var(--unit) * 1);
}

.centeredContent {
  position: absolute;
  left: 50%;
  top: calc((100% - var(--unit) * var(--height)) / 2);
  transform: translateX(-50%);
}

.centeredText {
  padding-top: 10px;
  text-align: center;
}

button {
  font-family: Arcology;
  font-size: calc(var(--unit) * 0.3);
  background-color: rgba(0, 0, 0, 0);
  color: black;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px 20px;
  cursor: pointer;
  float: center;
  margin: 5px 10px;
}

*::-webkit-scrollbar {
  width: calc(var(--unit) * 0.15);
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}
*::-webkit-scrollbar-thumb {
  background: black;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgb(50, 50, 50);
}