.apple-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
}

.apple {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ff3737;
    border-radius: 50%;
    transition: transform 0.5s ease-in-out;
}

.apple::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #3e8e41;
    border-radius: 50%;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.pieces {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.piece {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ff3737;
    border-radius: 50%;
}

.explode {
    animation: explode 1s ease-in-out;
}

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