body{
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0px;
  background: black;

  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;

  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;

  color:white;
}

canvas{
  position: absolute;
  border: 2px solid #292929;
  transform: scale(2) translateX(161px) translateY(91px);
  cursor: url("img/motorB.gif") 10 10, move;
}
#backCanvas{
  pointer-events: none;
}
.canvasDiv{
  width: 1280px;
  height: 720px;
}

#buttonsDiv{
  width: 1280px;
  text-align: center;
}
img{
  width: 30px;
  margin-bottom: 5px;
}
/* img:hover{
  filter: brightness(1.2);
} */
table{
  display: inline-block;
  margin-left: 300px;
}


.statsDiv{
  width: 110px;
  font-size: 21px;
}
#moneyDiv{
  color: #4caf50;
  /* animation: noMoney 0.2s infinite; */
}
@keyframes noMoney{
  0% { color: black; }
  100% { color: red; }
}

#lvlB0{
  animation: shakeAnimation 0.5s infinite;

}
@keyframes shakeAnimation{
  0% { transform: skewY(10deg);}
  50% { transform: skewY(-10deg);}
  100% { transform: skewY(10deg);}
}


#diamondsDiv{
  color: #00f6ff;
}

#restartDiv{
  width: 70px;
  color: #f44336;
  cursor: pointer;
}
#restartDiv:hover{
  filter: brightness(1.2);
}

#continueDiv{
  width: 70px;
  visibility: hidden;
  animation: color-change 1s infinite;
  cursor: pointer;
}
#continueDiv:hover{
  filter: brightness(1.2);
}
@keyframes color-change {
  0% { color: red; }
  25% { color: green; }
  75% { color: yellow; }
  100% { color: red; }
}



#levelMenu{
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgb(170,137,255);
  background: linear-gradient(0deg, rgba(170,137,255,1) 0%, rgba(0,219,255,1) 25%, rgba(255,255,255,1) 100%);}
button{
  width: 50px;
  height: 50px;
  background: rgb(90, 95, 124);
  border: 2px solid black;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;

  font-weight: 600;
  color: white;
}
button:hover{
  filter: brightness(1.2);
}

.machineButton{
  border: 2px solid #795548;
  border-radius: 5px;
  background: linear-gradient(0deg, rgb(52 44 44) 0%, rgb(0 0 19) 100%);
  padding: 4px;
  cursor: pointer;
}
.machineButton:hover{
  filter: brightness(1.5);
}
#tutorialArrow{
  pointer-events: none;
  position: fixed;
  color: red;
  font-size: 60px;
  animation: arrowShake 0.5s infinite;
  filter: drop-shadow(1px 3px 1px black);
}
@keyframes arrowShake{
  0% { transform: translateX(5px);}
  50% { transform: translateX(-5px);}
  100% { transform: translateX(5px);}
}

#tutorialText{
  font-size: 25px;
  position: fixed;
  color: white;
  filter: drop-shadow(1px 3px 1px black);
  top: 262px;
  left: 460px;
  text-align: center;
  font-family: monospace;
  width: 390px;
}
