body {
  margin: 0;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
}

#screen {
  cursor: url("./cursors/laser.png") 16 16, default;
  position: relative;
}

#screen.focus {
  cursor: url("./cursors/default.png"), default;
}

#screen.loading {
  cursor: url("./cursors/default.png"), default;
}

#screen.title {
  cursor: url("./cursors/default.png"), default;
}

#screen:not(.title) #start-button {
  display: none;
}

#start-button {
  cursor: url("./cursors/pointer.png") 7 2, pointer;
  position: absolute;
  left: 22.8125%;
  top: 76.66666666666667%;
  width: 23.125%;
  height: 12.22222222222222%;
}

#again-button {
  cursor: url("./cursors/pointer.png") 7 2, pointer;
  position: absolute;
  left: 33.75%;
  top: 82.22222222222222%;
  width: 23.125%;
  height: 12.22222222222222%;
}

#screen:not(.victory) #again-button {
  display: none;
}

#screen.level {
  cursor: url("./cursors/default.png"), default;
}

#screen:not(.level) #retry-button {
  display: none;
}

#retry-button {
  cursor: url("./cursors/pointer.png") 7 2, pointer;
  position: absolute;
  left: 34.6875%;
  top: 55.55555555555556%;
  width: 14.6875%;
  height: 13.33333333333333%;
}

#screen:not(.level) #level-button {
  display: none;
}

#level-button {
  cursor: url("./cursors/pointer.png") 7 2, pointer;
  position: absolute;
  left: 50.625%;
  top: 55.55555555555556%;
  width: 14.6875%;
  height: 13.33333333333333%;
}

#screen.defeat {
  cursor: url("./cursors/default.png"), default;
}

#screen:not(.defeat) #defeat-button {
  display: none;
}

#defeat-button {
  cursor: url("./cursors/pointer.png") 7 2, pointer;
  position: absolute;
  left: 38.75%;
  top: 28.33333333333333%;
  width: 22.8125%;
  height: 11.66666666666667%;
}

#screen.victory {
  cursor: url("./cursors/default.png"), default;
}

#screen .credit {
  cursor: url("./cursors/pointer.png") 7 2, pointer;
}

canvas:focus {
  outline: none;
}

#screen:not(.victory) .credit {
  display: none;
}

.pause-toggle {
  cursor: url("./cursors/pointer.png") 7 2, pointer;
  filter: invert(100%) sepia(0%) saturate(7491%) hue-rotate(313deg) brightness(106%) contrast(102%);
  left: 1.25%;
  opacity: .7;
  position: absolute;
  top: 2%;
  width: 3%;
}

#screen:not(.main) .pause-toggle {
  display: none;
}

#screen:not(.paused) #unpause {
  display: none;
}

#screen.paused #pause {
  display: none;
}

#settings {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  cursor: url("./cursors/default.png"), default;
  font-size: 200%;
  color: white;
  font-family: sans-serif;
}

label {
  margin-bottom: 1.5%;
}

input[type=checkbox] {
  transform: scale(2);
  margin-bottom: 2%;
}

input[type=range] {
  width: 33%;
  margin-bottom: 2%;
}

input[type=button] {
  background-color: transparent;
  border: 3px solid white;
  color: white;
  cursor: url("./cursors/pointer.png") 7 2, pointer;
  padding: 0.5% 1%;
  font-size: 1em;
  margin-top: 1%;
}

input[type=button]:hover {
  opacity: .7;
}

#screen:not(.paused) #settings {
  display: none;
}

.button {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}