body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      max-height: 100vh;
      color: rgb(0, 0, 0);
      font-family: 'Work Sans', sans-serif;
      max-height: 100vh;
    }

.container {
   background-image: url(alleta.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      margin: 0;
}
.container::after {
  content: '';
  position: absolute;
  background-color: rgba(255, 252, 252, 0.309);
  top: 0 ;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.container2 {
   background-image: url(alleta2.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      margin: 0;
      z-index: 0;
}
.container2::after {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.461);
  top: 0 ;
  bottom: 0;
  left: 0;
  right: 0;
 z-index: -1;
}
    #isi2 {
      position: relative;
      top: -5vh;
      font-size: 1.8vh;
    }
    #isi {
        text-shadow: 1px 1px 3px rgb(255, 245, 245);
        font-size: 1.8vh;
        position: relative;
        top: -5vh;
    }
    #menatap {
        font-size: larger;
    }
    #yatidak {
      display: flex;

    }
    button {
      padding: 10px 20px;
      border-radius: 15px;
      margin: 10px;
      font-size: 16px;
      cursor: pointer;
      font-family: "Work Sans", sans-serif;

    }
     #linkwa {
    border: none;
    color: white;
    background-color: #37ff14ab;
    max-width: 50vw;
   }
   #linkwa:hover {
    border: none;
    background-color: #37ff14b2;
    box-shadow: 0 0 22px #39ff14;
    box-shadow: 0 0 33px #39ff14;
   }
    #ya:hover {
        animation: pulse 0.6s infinite;
        box-shadow: 0 0 10px rgb(255, 0, 149), 0 0 20px rgb(255, 0, 149), 0 0 30px rgb(255, 0, 149);
        background-color: rgb(255, 0, 149);
        transition: 0.2s;
        transform: scale(2);
    }
    #ya {
        position: absolute;
        top: 80vh;
        right: 50vw;
        border: none;
        transition: 0.3s ease;
        background-color: #39ff14; /* Neon green */
        box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 30px #39ff14;
    }
    #tidak {
        transition: left 0.3s ease, top 0.3s ease;
        position: absolute;
        top: 80vh;
        border: none;
        left: 50vw;
        background-color: #ff073a; /* Neon red/pink */
        box-shadow: 0 0 10px #ff073a, 0 0 20px #ff073a, 0 0 30px #ff073a;
    }
    #ya, #tidak {
  padding: 10px 25px;
  font-size: 3vh;
  border-radius: 12px;
  color: white;
  font-family: "Work Sans", sans-serif;
  cursor: pointer;
  transition: 0.3s ease;
  text-shadow: 0 0 5px white;
}


#ya:hover, #tidak:hover {
     animation: pulse 0.6s infinite;
  transform: scale(1.1);
}

    #kupu1 {
      position: absolute;
      bottom: 75vh;
      left: 50vw;

    }
     #kupu2 {
      position: absolute;
      width: 40vw;
      bottom: 10vh;
      right: 50vw;
    }
     #kupu3 {
      position: absolute;
      top:6vh;
      right: 50vw;
      z-index: -1;
    }    
    h1 {
      margin-top: 1vh;
        position: relative;
        text-align: center;
        font-family: "Sacramento", cursive;
        font-size: 7vh;
        color: rgb(250, 172, 225);
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
    }
    h2 {
        text-align: center;
        font-family: "Work Sans", sans-serif;
    }
    p {
      text-shadow: 1px 1px 11px white;
        text-align: center;
        font-family: "Work Sans", sans-serif;
    }

/* 1. Bounce untuk tombol ‘Tidak’ */
@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-15px); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

.bounce {
  animation: bounce 0.5s ease;
}

/* 2. Haluskan perpindahan posisi */
#tidak {
  transition: left 0.3s ease, top 0.3s ease;
}

/* 3. Pulse untuk tombol ‘Ya’ */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}



/* 4. Fade-in pada halaman akhir */
.fade-in {
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}