* { box-sizing: border-box; }
html {
  height:100%;
  width:100%;
}
body {
  font-family: win95, sans-serif;
  color:white;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(57, 42, 65);
  box-sizing: border-box;
  padding:5vw;
  touch-action: none;         /* block touch gestures (scroll, pinch, swipe) */
  user-select: none;          /* prevent text selection / hold highlight */
}

.counter {
  font-size: 6em;
  padding: 0.5em;
  text-align: center;
  position: fixed;
  left:0;
  bottom:0;
  width: 100%;
}

button {
  border-radius: 666px;
  padding: 1em;
  margin: 1em 0;
  border:solid rgb(255, 255, 158) thin;
  font-family: win95, sans-serif;
}

.shake {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-5px, 2px) rotate(-3deg); }
  40% { transform: translate(5px, -2px) rotate(3deg); }
  60% { transform: translate(-4px, 2px) rotate(-2deg); }
  80% { transform: translate(4px, -2px) rotate(2deg); }
}

.confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: hsl(var(--hue), 80%, 60%);
  pointer-events: none;
  animation: fall 1s ease-out forwards;
}

@keyframes fall {
  0% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(720deg); }
}