body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #fce4ec; /* Soft pink background */
    font-family: 'Quicksand', sans-serif;
    color: #4a4a4a;
    overflow: hidden; /* Prevent scrollbar if buttons get too big */
    transition: background-color 0.5s ease; /* Smooth background transition */
}

.container {
    text-align: center;
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    width: 50%;
    position: relative;
}

.intro-gif {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 5px solid #ffc0cb; /* Cute pink border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

h1 {
    font-family: 'Pacifico', cursive; /* More whimsical font for the question */
    color: #ff69b4; /* Hot pink */
    font-size: 3em;
    margin-bottom: 30px;
    text-shadow: 2px 2px #ffebee;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
    margin-top: 20px;
}

.main-button {
    background-color: #ffc0cb; /* Light pink */
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 15px 30px;
    font-size: 2em; /* Initial size for Yes button */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Smooth transitions for hover/click effects */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    outline: none; /* Remove focus outline */
    margin-bottom: 15px;
    margin-top: 30px;
}

#yesButton {
    background-color: #8de4af; /* Greenish for Yes */
    font-size: 2em; /* Ensure initial size for Yes */
}

#noButton {
    background-color: #ff9aa2; /* Reddish for No */
}

/* #yesButton:hover {
    transform: scale(1.05);
    background-color: #7ad19b; 
}

#noButton:hover {
    transform: scale(1.05);
    background-color: #ff7f8a;
} */

#responseMessage {
    margin-top: 30px;
    font-size: 1.8em;
    font-weight: bold;
    color: #ff69b4; /* Hot pink for responses */
    animation: fadeIn 0.5s ease-out; /* Fade in animation */
}

#responseMessage p {
    margin: 0;
}

.celebrate-gif {
    margin-top: 20px;
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hidden {
    display: none;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

footer {
  padding: 10px 20px;
  font-size: 20px;
  position: fixed;
  bottom: 0
}