body {
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#loading, #startButton {
  position: absolute;
}

#gameCanvas {
  display: none;
  background-color: #111;
}

#startButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: "Verdana", "Courier New", monospace;
  font-size: 48px;
  font-weight: bold;
  padding: 30px 80px;

  border: none;
  border-radius: 20px;
  background: linear-gradient(to bottom, #00c853, #009624);
  color: white;
  cursor: middle-finger;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.2s, transform 0.1s;
  z-index: 10;
  
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAYAAAD3Va0xAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpUUqDnYQ6ZChOlkQleIoVSyChdJWaNXB5KV/0KQhSXFxFFwLDv4sVh1cnHV1cBUEwR8QNzcnRRcp8b6k0CLGC4/3cd49h/fuA4RWjalm3ySgapaRSSbEfGFVDLxCQBA+xBGRmKmnsos5eNbXPXVS3cV4lnffnzWoFE0G+ETiOaYbFvEGcXzT0jnvE4dZRVKIz4knDLog8SPXZZffOJcdFnhm2Mhl5onDxGK5h+UeZhVDJZ4hjiqqRvlC3mWF8xZntdZgnXvyF4aK2kqW67QiSGIJKaQhQkYDVdRgIUa7RoqJDJ0nPPyjjj9NLplcVTByLKAOFZLjB/+D37M1S9NTblIoAfS/2PbHGBDYBdpN2/4+tu32CeB/Bq60rr/eAmY/SW92tegRMLQNXFx3NXkPuNwBRp50yZAcyU9LKJWA9zP6pgIwfAsMrLlz65zj9AHI0ayWb4CDQ2C8TNnrHu8O9s7t357O/H4AdNByqGQyNIkAAAAGYktHRAAAAAAAAPlDu38AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQflAggBOBA+w522AAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAd9JREFUOMu1k8FL21Acx39J01qbvsTGzGoNiCKFTSbDsaMx6BBFMPQieNH/QTev3mTX3ccOKzvMjYFDPI2NMLFjJ2Gi4o6FoCiCotbE4tfLGlO1ttHte/rxHu/zfu/7+z6iGsQkDXGWAt1HcZaCZeWwtPT1frBkqguO48JxXChquiJIqAY6c88oEglXvZCnf6T/CwoJ0axumDAGMtc8MQYy0A0TPB+eqUpX1DQKhQLyeRuKmkZJ/nU50Q7dMKEbJkJCNFsR5D9cUlvH07L1o6Nj2PY2GhLtEO7qCZMYiWKMRDFGfChc3eywb/RNTWqw2/zPse1trz44OPTqb9+Xy575t81WJFNdiNTJ+augWqSoafBMasXCwgfa2sjR1PRLTU0+vNt/YrKGH8u/PLpl5dDz7HngjoiI6NHjXuzs7Hob/joQKCREs8Mj43AcF0HlOC4SjZ2XdkTrlePpF7OBQaWUl/kViyfxLjsfCDT/8QvEePP1AbVo3djc/FMzaHBo7OYpcxzfpxtmWfgq6c3b96iPPTivGIlInZx/0tOP1dW1GwHFYhFzr17Dnznutoy1aN2YnBgjc3SIJInR3u4+/V5bp0+fF+nninVyWtgXaw4sx/F9TNYgNbSBSZr3ja7qAqVrhTJVohAtAAAAAElFTkSuQmCC') 10 2, pointer;
}

#startButton:hover {
  background: linear-gradient(to bottom, #69f0ae, #00c853);
}

#startButton:active {
  transform: translate(-50%, -50%) scale(0.97);
}
