*{
    margin:0;
} 

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(144, 238, 144);
} 

.watermelon {
    position: absolute;
    height: 500px;
    width: 500px;
}

.cut-1 {
    position: absolute;
    height: 100px;
    width: 200px;
    left: 30%; 
    top: 40%;
    border-radius: 50%;
    transform: rotate(45deg);
    background-color:rgb(220, 20, 60);
}

.cut-1:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%; 
    top: -15%;
    border-bottom: 60px solid  rgb(0, 153, 0); 
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.seed1, .seed2, .seed3, .seed4, .seed5 {
    height: 10px; 
    width: 10px; 
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
    background-color: rgb(66, 2, 0);
}

.seed1 {
    position: absolute; 
    left: 40%;
    top: 40%;  
}

.seed2 {
    position: absolute;
    left: 50%;
    top: 42%;
}

.seed3 {
    position: absolute;
    left: 45%;
    top: 47%;
}

.seed4 {
    position: absolute;
    left: 40%;
    top: 35%;
}

.seed5 {
    position: absolute;
    left: 55%;
    top: 45%;
}

.cut-2 {
    position: absolute;
    height: 100px;
    width: 200px;
    left: 30%; 
    top: 40%;
    border-radius: 50%;
    transform: rotate(-130deg);
    background-color: rgb(0, 153, 0);
    animation: slice 4s ease-in-out infinite; 
}

.cut-2:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%; 
    top: -15%;
    border-bottom: 60px solid rgb(0, 153, 0); 
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

@keyframes slice {
        from {
            left: 30%;
            top: 40%; 
        }
        to {
            left: 50%; 
            top: 55%;
        } 
    }

   footer {
        color: #CC9999;
        text-align: center;
        width: 100%; 
        letter-spacing: 1.5px;
        position: absolute;
        bottom:50px
    }