* {
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: #1d1230;
  font-family: 'Courier New', monospace;
  color: #ffb366;
  text-align: center;
}

main {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 20px;
}

/* The big pumpkin you tap */
#pumpkin {
  font-size: 7rem;
  cursor: pointer;
  transition: transform 0.2s;
}

/* Little wiggle while it's being pressed */
#pumpkin:active {
  transform: scale(1.2) rotate(8deg);
}

#msg {
  max-width: 320px;
  line-height: 1.5;
}

/* The ghost starts hidden below the screen */
#ghost {
  position: fixed;
  bottom: -80px;
  left: 10%;
  font-size: 3rem;
  opacity: 0;
}

/* JS adds this class on each tap to make it fly up */
#ghost.fly {
  animation: fly 4s ease-in-out forwards;
}

@keyframes fly {
  20% {
    opacity: 1;
  }
  to {
    bottom: 105%;
    left: 70%;
    opacity: 0;
  }
}