*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    min-height:100vh;
    background:#7fff00;
    overflow-x:hidden;
    color:#103000;
    padding:30px;
}

header{
    text-align:center;
    margin-bottom:30px;
}

h1{
    font-size:3rem;
    text-shadow:3px 3px 0 #aaff00;
}

header p{
    font-size:1.2rem;
    margin-top:10px;
}

.card{
    background:rgba(255,255,255,0.3);
    backdrop-filter:blur(8px);
    border:4px solid #95ff00;
    border-radius:20px;
    padding:20px;
    margin:20px auto;
    max-width:800px;
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.card h2{
    margin-bottom:15px;
}

.stat{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    font-size:1.2rem;
}

button{
    margin-top:15px;
    padding:12px 20px;
    border:none;
    border-radius:10px;
    background:#0f0;
    cursor:pointer;
    font-weight:bold;
    transition:.3s;
}

button:hover{
    transform:scale(1.05) rotate(-2deg);
}

.meter{
    width:100%;
    height:40px;
    background:#d7ff8d;
    border-radius:20px;
    overflow:hidden;
}

#fill{
    height:100%;
    width:0%;
    background:limegreen;
    transition:.4s;
}

.verdict{
    text-align:center;
    font-size:1.2rem;
}

.blob{
    position:fixed;
    border-radius:50%;
    opacity:.25;
    animation:float 12s infinite linear;
}

.blob1{
    width:200px;
    height:200px;
    background:#00ff00;
    left:-50px;
}

.blob2{
    width:150px;
    height:150px;
    background:#c8ff00;
    right:0;
    top:300px;
}

.blob3{
    width:250px;
    height:250px;
    background:#b6ff00;
    left:50%;
    bottom:-100px;
}

@keyframes float{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-50px);
    }
    100%{
        transform:translateY(0);
    }
}
.vomit{
    position:fixed;
    pointer-events:none;
    z-index:-1;

    background:#6b4423;

    border-radius:
        42% 58% 61% 39% /
        35% 31% 69% 65%;

    filter:
        drop-shadow(0 0 10px rgba(0,0,0,.25));

    animation:
        squish 4s ease-in-out infinite,
        ooze 8s ease-in-out infinite;
}

.vomit::before,
.vomit::after{
    content:"";
    position:absolute;
    background:inherit;
    border-radius:50%;
}

.vomit::before{
    width:45%;
    height:45%;
    left:-15%;
    top:20%;
}

.vomit::after{
    width:35%;
    height:35%;
    right:-10%;
    bottom:10%;
}

@keyframes squish{
    0%,100%{
        transform:
            scale(1)
            rotate(0deg);
    }

    25%{
        transform:
            scaleX(1.12)
            scaleY(.88)
            rotate(2deg);
    }

    50%{
        transform:
            scaleX(.9)
            scaleY(1.15)
            rotate(-2deg);
    }

    75%{
        transform:
            scaleX(1.08)
            scaleY(.92)
            rotate(1deg);
    }
}

@keyframes ooze{
    0%,100%{
        filter:
            brightness(1)
            drop-shadow(0 0 10px rgba(0,0,0,.25));
    }

    50%{
        filter:
            brightness(.85)
            drop-shadow(0 0 18px rgba(0,0,0,.4));
    }
}
.drip{
    position:absolute;
    width:18px;
    background:#5c381c;
    border-radius:999px;
    transform-origin:top;
    animation:drip 3s ease-in-out infinite;
}

@keyframes drip{
    0%,100%{
        height:20px;
    }

    50%{
        height:70px;
    }
}