html,
	body {
	  height: 100%;
	  margin: 0;
	  overflow: hidden;
	  touch-action: none;
	}

	body {
	  font-family: Arial, Verdana, sans-serif;
	  cursor: grab;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: white;
	  background-color: #1e1a33;
	  position: fixed;
	  width: 100%;
	  height: 100%;
	}

	canvas {
	  display: block;
	  max-width: 100%;
	  max-height: 100%;
	}

	div,
	i {
	  user-select: none;
	  -webkit-user-select: none;
	  -webkit-touch-callout: none;
	  pointer-events: none;
	}

	div.score,
	div.introduction,
	div.perfect,
	button.restart {
	  pointer-events: auto;
	}
	
	i {
	  position: fixed;
	  color: white;
	  top: -10%;
	  z-index: 9999;
	  animation-name: snowflakes-fall, snowflakes-shake;
	  animation-duration: 10s, 3s;
	  animation-timing-function: linear, ease-in-out;
	  animation-iteration-count: infinite, infinite;
	  animation-play-state: running, running;
	}
	
	@keyframes snowflakes-fall {
	  0% {
	    top: -10%;
	  }
	  100% {
	    top: 100%;
	  }
	}
	
	@keyframes snowflakes-shake {
	  0% {
	    transform: translateX(0px);
	  }
	  50% {
	    transform: translateX(80px);
	  }
	  100% {
	    transform: translateX(0px);
	  }
	}