/* Cartoon Grass and Flowers Footer Elements */
.grass-footer {
    height: 50px;
    background: linear-gradient(to top, #4CAF50 0%, #8BC34A 100%);
    position: relative;
    margin-top: -50px;
    z-index: 1;
}

/* Grass blades */
.grass-footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: 
        radial-gradient(circle at 10px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 25px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 40px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 55px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 70px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 85px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 100px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 115px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 130px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px),
        radial-gradient(circle at 145px 0, transparent 10px, #4CAF50 10px, #4CAF50 15px, transparent 15px);
    background-size: 150px 20px;
    background-repeat: repeat-x;
}

/* Flowers */
.flower {
    position: absolute;
    bottom: 20px;
    width: 20px;
    height: 20px;
    z-index: 2;
}

.flower::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #FF5252 0%, #FF5252 40%, transparent 40%);
    border-radius: 50%;
}

.flower::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 4px;
    height: 4px;
    background: #FFEB3B;
    border-radius: 50%;
}

.flower-1 { left: 5%; }
.flower-2 { left: 15%; }
.flower-3 { left: 25%; }
.flower-4 { left: 35%; }
.flower-5 { left: 45%; }
.flower-6 { left: 55%; }
.flower-7 { left: 65%; }
.flower-8 { left: 75%; }
.flower-9 { left: 85%; }
.flower-10 { left: 95%; }

/* Different flower colors */
.flower-1::before, .flower-6::before { background: radial-gradient(circle, #FF5252 0%, #FF5252 40%, transparent 40%); }
.flower-2::before, .flower-7::before { background: radial-gradient(circle, #E040FB 0%, #E040FB 40%, transparent 40%); }
.flower-3::before, .flower-8::before { background: radial-gradient(circle, #40C4FF 0%, #40C4FF 40%, transparent 40%); }
.flower-4::before, .flower-9::before { background: radial-gradient(circle, #FFEB3B 0%, #FFEB3B 40%, transparent 40%); }
.flower-5::before, .flower-10::before { background: radial-gradient(circle, #FF9800 0%, #FF9800 40%, transparent 40%); }