/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: url("img/bg.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 768px) {
  html,
  body {
    overflow-y: auto; /* scroll muncul saat layar <= 768px */
  }
}

/* Gaya Kustom untuk Tata Letak dan Background */
#home {
  min-height: 100vh;
  image-rendering: pixelated;
}

.wrapper {
  margin-top: 40px;
  gap: 4rem;
}

/* Gaya Kustom untuk Elemen Retro Pixel */
.ready {
  font-family: "Retro Pixel", sans-serif;
  color: #330084;
  font-weight: 500;
  padding-top: 60px;
  border-radius: 6px;
  font-size: 5rem;
  background-color: transparent;
  text-shadow: -1px -1px 0 purple, 1px -1px 0 purple, -1px 1px 0 purple,
    1px 1px 0 purple;
  text-align: center;
  /* Animasi tetap dipertahankan */
  animation: flash 1s infinite alternate, bounce 1s infinite alternate;
}

@keyframes flash {
  0% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0;
    filter: brightness(1.5);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* Penyesuaian Tombol Bootstrap */
.btn-primary {
  font-family: "Snowbell", monospace;
  font-size: 1.3rem;
  color: white;
  background: #841877;
  border: 4px solid #d2d2d2;
  border-radius: 30px;
  padding: 9px 10px 7px 14px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px #888, 0 8px #000000;
  transition: all 0.1s ease-in-out;
  image-rendering: pixelated;
}

.btn-primary:hover {
  color: #841877;
  border-color: whitesmoke;
  background: white;
  box-shadow: 0 2px #888, 0 4px #000;
  transform: translateY(1px);
}

.btn-primary:active {
  color: white !important;
  background: #841877 !important;
  border-color: whitesmoke !important;
  box-shadow: 0 1px #000 !important;
  transform: translateY(3px);
}

.zoomOutDown {
  animation: zoomOutDown 0.8s ease forwards;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translateY(60px);
  }
  100% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translateY(700px);
    transform-origin: center bottom;
  }
}