
#btn {
  display: block;
  color: white;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  font-size: large;
  transition: transform 0.3s ease-in-out;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("pixil-frame-0 (2).png");
}

#btn:hover {
  transform: scale(1.1);
  animation: wiggle-scale 1s ease-in-out infinite;
  animation-delay: 0.3s;
}

#btn:not(:hover) {
  animation: none;
}


@keyframes wiggle-scale {
  0%,
  100% {
    transform: scale(1.2) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(5deg);
  }
  50% {
    transform: scale(1.2) rotate(-5deg);
  }
  75% {
    transform: scale(1.2) rotate(5deg);
  }
}

body {
  background-color: rgb(244, 194, 113);
}

h1 {
  color: rgb(84, 55, 9);
  text-align: center;
  font-size: 90px;
  font-family: "Pixelify Sans", sans-serif;
  margin-bottom: -20px;
  margin-top: -1px;
}

h3 {
  color: rgb(84, 55, 9);
  text-align: center;
  font-family: "Pixelify Sans", sans-serif;
  margin-top: -10px;
}

* {
  padding: 10px;
  font-family: "Pixelify Sans"
  cursor: url("cursor (2).cur"), auto;
  

#quote {
  display: none;
  font-size: 40px;
  margin: 20px auto;
  max-width: 900px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: rgb(84, 55, 9);
  margin: 0 auto;
  text-align: center;
  font-family: "Pixelify Sans", sans-serif;
  background-color: rgb(240, 224, 184);
}

.pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
