.countdown-container {

    text-align: center;

    font-family: 'Comic Sans MS', cursive, sans-serif;

    background: linear-gradient(135deg, #ff9a9e, #fad0c4);

    padding: 20px;

    border-radius: 15px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.countdown-timer {

    font-size: 24px;

    font-weight: bold;

    color: #fff;

    margin: 10px 0;

}



#birthdayInput, button {

    padding: 10px;

    margin-top: 10px;

    border: none;

    border-radius: 5px;

}



/*button {

    background: #ff6f61;

    color: #ffffff;

    cursor: pointer;

}*/

.start-ountdown {

    background: #ff6f61;

    color: #ffffff;

    cursor: pointer;

}



button:hover {

    background: #ff3b30;

}

/* Flexbox for Birthday Inputs */

.birthday-inputs .input-row {

    display: flex;

    gap: 10px; /* Space between inputs */

}



.birthday-inputs input,

.birthday-inputs select {

    flex: 1; /* Distribute available space equally */

    padding: 10px;

    border: 2px solid #ff6f61; /* Pink border */

    border-radius: 10px;

    font-size: 1em;

    background-color: #fff3e0; /* Light orange background */

    color: #333;

    transition: border-color 0.3s ease, background-color 0.3s ease;

}



    .birthday-inputs input:focus,

    .birthday-inputs select:focus {

        border-color: #2196f3; /* Blue border on focus */

        background-color: #e3f2fd; /* Light blue background on focus */

    }

/* Balloons animation */

.balloon {

    position: absolute;

    bottom: -100px;

    width: 40px;

    height: 50px;

    border-radius: 50%;

    animation: float-up 6s ease-in forwards;

    z-index: 10;

    opacity: 0.9;

}



    .balloon:before {

        content: "";

        position: absolute;

        bottom: -8px;

        left: 50%;

        width: 2px;

        height: 60px;

        background: rgba(0,0,0,0.3);

        transform: translateX(-50%);

    }



    .balloon:after {

        content: "▲";

        position: absolute;

        bottom: -15px;

        left: 50%;

        transform: translateX(-50%);

        font-size: 10px;

        color: rgba(0,0,0,0.3);

    }



/* ===== End Responsive Styles for Tick Tock ===== */

@keyframes float-up {

    0% {

        transform: translateY(0) rotate(-5deg);

        bottom: -100px;

    }



    100% {

        transform: translateY(-100vh) rotate(5deg);

        bottom: 100vh;

    }

}



/* Countdown boxes - Desktop */

.countdown-boxes {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin: 30px 0;

}



.countdown-box {

    border-radius: 15px;

    padding: 15px 10px;

    min-width: 70px;

    text-align: center;

    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);

    border: 3px solid white;

}



.countdown-value {

    font-size: 2rem; /* Reduced from 3rem */

    font-weight: bold;

    color: white;

    line-height: 1;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

    display: inline-block;

}



.countdown-label {

    font-size: 1rem; /* Reduced from 1.2rem */

    color: white;

    margin-top: 8px;

    text-transform: uppercase;

    font-weight: bold;

    letter-spacing: 1px;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

}

.days-box {

    background: #FF6B6B; /* Red */

    animation: pulse 2s infinite alternate;

}

.hours-box {

    background: #4ECDC4; /* Teal */

    animation: pulse 2s infinite alternate 0.5s;

}



.minutes-box {

    background: #FFD166; /* Yellow */

    animation: pulse 2s infinite alternate 1s;

}



.seconds-box {

    background: #06D6A0; /* Green */

    animation: pulse 2s infinite alternate 1.5s;

}

/* Mobile Responsive Styles */

@media (max-width: 768px) {

    .countdown-boxes {

        gap: 10px;

        margin: 20px 0;

        flex-wrap: wrap;

    }



    .countdown-box {

        padding: 12px 8px;

        min-width: 60px;

        border-radius: 12px;

        border-width: 2px;

    }



    .countdown-value {

        font-size: 1.5rem; /* Smaller for mobile */

    }



    .countdown-label {

        font-size: 0.8rem; /* Smaller for mobile */

        margin-top: 5px;

    }



/*    button {

        padding: 8px 12px;

        font-size: 0.9rem;

    }*/

    .start-ountdown {

        background: #ff6f61;

        color: #ffffff;

        cursor: pointer;

    }



    .birthday-inputs .input-row {

        flex-direction: column;

        gap: 8px;

        background: #ff6f61;

        color: #ffffff;

    }



    .birthday-inputs input,

    .birthday-inputs select {

        width: 100%;

    }

}



/* Small mobile devices */

@media (max-width: 480px) {

    .countdown-box {

        padding: 10px 5px;

        min-width: 50px;

    }



    .countdown-value {

        font-size: 1.3rem;

    }



    .countdown-label {

        font-size: 0.7rem;

    }



    h2 {

        font-size: 1.3rem;

    }



    p {

        font-size: 0.9rem;

    }

}

}



/* Dancing animation */



@keyframes dance {

    0%, 100% {

        transform: translateY(0) rotate(0deg);

    }



    25% {

        transform: translateY(-10px) rotate(5deg);

    }



    50% {

        transform: translateY(0) rotate(0deg);

    }



    75% {

        transform: translateY(-5px) rotate(-5deg);

    }

}



/* Pulsing animation */

@keyframes pulse {

    0% {

        transform: scale(1);

    }



    100% {

        transform: scale(1.05);

    }

}



/* Bounce animation for button */

button {

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-5px);

    }

}