* {
  /* background-color: rgb(41, 41, 41); */
  font-family: Arial, Helvetica, sans-serif;
  background-color: hsl(0, 0%, 15%);
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);

  border-radius: 3px;
  box-shadow: -3px 3px 7px 2px rgba(0, 0, 0, 0.2);

  color: rgb(255, 255, 255);
}

#debugText {
  position: relative;
  z-index: 9999;
  width: 100%;
  height: auto;
  
  margin: 0;
  padding: 14px;

  background: none;
  
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  text-shadow: white 1px 1px;

  /* visibility: hidden; */
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: 20px;
  height: 20px;
  margin: -6px 0 0 -6px;

  background-color: #ffffff;
  border: 2px solid #ffffff;
  border-top: 2px solid #000000;

  border-radius: 50%;

  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;

  opacity: 0.85;

  visibility: visible;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}