body{
    /*background-color: hsl(321, 100%, 85%);
    background-image: url(/Images/OYYV3475.PNG);*/
    background:
    linear-gradient(
      hsla(321, 100%, 85%, 0.808),
      hsla(321, 100%, 85%, 0.952)
    ),
    url("../Images/SAXM2126.PNG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Arial', sans-serif;
    display: flex;
    padding: 20px; /* prevents text touching edges on phones */
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    min-height: 100vh;
    margin: 0;
}
.music-control {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 999;
  font-family: 'Poppins', sans-serif;
}

.music-text {
  font-size: 0.85rem;
  color: #6c264c;
  padding: 2px 5px;
  background:hsla(320, 13%, 95%, 0.9); 
  border-radius: 20px;
  opacity: 0.9;
}

#musicBtn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: hsla(320, 13%, 95%, 0.9);
  box-shadow: #b03a7be4 0px 0px 8px 4px;
  font-size: 20px;
  color: #762953e4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1),
              box-shadow 0.35s cubic-bezier(.4,0,.2,1),
              background-color 0.35s ease;
}
#musicBtn:hover {
  
  /* background: rgb(219, 130, 190); */
  box-shadow: #b03a7be4 0px 0px 12px 8px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
h1{
    font-family: 'Pacifico', cursive;
    font-size: 3em;
    text-align: center;
    color: hsl(0, 98%, 48%);
    text-shadow: 0 4px 15px hsla(343, 76%, 68%, 0.726);
    margin: 0.5em 0;
}

h2{
    font-family: 'dancing script', cursive;
    text-align: center;
    font-size: 3em;
    color: hsla(0, 90%, 46%, 0.973);
    text-shadow: 0 4px 15px hsla(0, 76%, 84%, 0.701);
    margin: 0.5em 0;
}
p{
    font-family: 'playfair display', serif;
    text-align: center;
    font-size: 1em;
    color: hsla(0, 90%, 46%, 0.973);
    margin: 0.5em 0;
}
.buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    
}
.yes-wrapper {
  display: inline-block; /* lets YES grow independently */
}

.btnyes{
    padding: 10px 20px;
    font-size: 1em ;
    color: hsl(0, 78%, 9%);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition:background-color 0.5s ease;
} 
.btnyes:hover{
    background-color: hsla(0, 69%, 15%, 0.991);
    color: white;
}
.btnno{
    padding: 10px 20px;
    font-size: 1em ;
    color: hsl(0, 78%, 9%);
    border: none;
    border-radius: 30px;
    flex: 0 0 auto;
    cursor: pointer;
    transition:background-color 0.5s ease,
               left 0.2s ease,
               top 0.2s ease;
    position: relative;
    
}
.btnno:hover{
    background-color: hsla(0, 69%, 15%, 0.991);
    color: white;
}


/* explosion effect for mobile NO button */

.particle {
  position: fixed;
  font-size: 1.5rem;
  pointer-events: none;
  animation: scatter 800ms ease-out forwards;
}

@keyframes explode {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes vibrate {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 4px); }
  20% { transform: translate(4px, -4px); }
  30% { transform: translate(-4px, -4px); }
  40% { transform: translate(4px, 4px); }
  50% { transform: translate(-4px, 4px); }
  60% { transform: translate(4px, -4px); }
  70% { transform: translate(-4px, -4px); }
  80% { transform: translate(4px, 4px); }
  90% { transform: translate(-4px, 4px); }
  100% { transform: translate(0, 0); }
}


@keyframes scatter {
  to {
    transform: translate(var(--x), var(--y)) scale(1.8);
    opacity: 0;
  }
}



@media (max-width: 420px) {
  h1 {
    font-size: 1.50em;
    text-align: center;
    margin: 1em 0;
  }

  h2 {
    font-size: 1.50em;
    padding: 0 10px;
  }

  p {
    font-size: 0.8em;
    padding: 0 15px;
    margin: 2.5em 0;
  }

  .buttons {
    flex-direction: column;
    gap: 15px;
  }

  .btnyes,
  .btnno {
    width: 100%;
    max-width: 260px;
    font-size: 1em;
    font-family: poppins, sans-serif;
  }

  .yes-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .music-text {
  font-size: .7rem;
}

#musicBtn {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
}
@media (hover: hover) and (pointer: fine) {
  .btnyes:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px hsla(321, 60%, 60%, 0.35);
    color: hsl(0, 78%, 9%);
  }

  .btnno:hover {
    transform: scale(1.02);
    /* color: hsl(0, 78%, 9%); */
  }

  #musicBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px hsla(321, 60%, 60%, 0.4);
  }
}