@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
}

.kotak {
  margin-top: 5rem;
  cursor: pointer;
  animation: goyang .75s infinite;
}
.kotak2 {
  margin-top: 5rem;
  animation: goyang .75s infinite;
}
.tutup-kotak,
.pita {
  top: 0;
  opacity: 1;
  z-index: 1;
  transition: top 1s ease, opacity 1s ease;
}
.pita2,
.pita3 {
  top: 0;
  opacity: 1;
  transition: top 1s ease, opacity 1s ease;
}
.pita {
  padding: 1rem 1.25rem;
}
.pita2 {
  padding: 2rem 2.5rem;
  border-radius: 50% 100%;
  left: 35%;
}
.pita3 {
  padding: 2rem 2.5rem;
  border-radius: 100% 50%;
  left: 65%;
}
.hadiah {
  top: 50%;
  opacity: 0;
  z-index: -1;
  transition: top 1s ease, opacity 1s ease, z-index 1.5s ease;
}

.kotak.buka {
  animation: none;
}
.kotak.buka .tutup-kotak,
.kotak.buka .pita,
.kotak.buka .pita2,
.kotak.buka .pita3 {
  top: -200px;
  opacity: 0;
}
.kotak.buka .hadiah {
  top: -40px;
  opacity: 1;
  z-index: 1;
}

@keyframes goyang {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}