body {
  font-family: 'Roboto Mono', monospace;
  background-color: rgb(238, 241, 245);
}

#typeWriter {
  font-family: 'Roboto Mono', monospace;
  text-align: left;
  top: 30%;
  width: 90%;
  max-width: 600px;
  margin: 10vw auto;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.signature, .number, .stamp {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

.signature {
  animation-delay: 4s;
}

.number {
  animation-delay: 3s;
}

.stamp {
  animation-delay: 2s;
}

.signature img {
  width: 30vw;
  height: auto;
  position: fixed;
  z-index: 2;
  right: 0;
  bottom: 10%;
}

.number img {
  width: 20vw;
  position: fixed;
  z-index: 2;
  right: 20%;
  bottom: 30%;
  mix-blend-mode: darken;
}

.stamp img {
  width: 10%;
  position: fixed;
  z-index: 2;
  right: 10%;
  bottom: 33%;
  mix-blend-mode: hard-light;}

  .button {
    position: relative; /* Ensure .spark and .buttonHover are positioned relative to .button */
    display: inline-block;
}

.button img {
  width: 10%;
  position: fixed;
  z-index: 2;
  left: 10%;
  bottom: 10%;
  box-shadow: none;
  transition: filter 0.3s;
}

.buttonHover {
  width: 300px;
  visibility: hidden;
  background: none;
  color: #00000080;
  font-family: "Ballet", cursive;
  font-size: 45px;
  text-align: center;
  border-radius: 1px;
  padding: 1px 0;
  position: relative;
  display: inline-block;
  margin-left: 5%;
  margin-top: -8%;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s;
  transform: rotate(-20deg)
}

.button:hover .buttonHover {
  visibility: visible;
  opacity: 1;
}



.spark img {
  visibility: hidden;
  width: 35%;
  height: auto;
  opacity: 0;
  transition: opacity 1s;
  left: 38%;
  position: absolute;
  top: 25%;
}


.button:hover .spark img {
  visibility: visible;
  opacity: 1;
}

.button:hover img {
  filter: drop-shadow(-14px 14px 23px #c0c0c0);
}