#prot_area{
    display: flex;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    z-index: 1;
}
#slime_A{
    display: block;
    position: relative;
    width: 120px;
    height: 100px;
    margin-top: 100px;
    border-radius: 50%;
    background-image: radial-gradient(rgba(0,200,255,0.8) 10%,rgba(0,200,255,0.6));
    animation: squishy_slime .3s ease-in-out infinite;
    transition: .5s;
    pointer-events: all;
    cursor: pointer;
    z-index: 1;
}
#slime_B{
    display: block;
    position: relative;
    width: 120px;
    height: 100px;
    margin-top: 100px;
    border-radius: 50%;
    background-image: radial-gradient(rgba(0,200,255,0.8) 10%,rgba(0,200,255,0.6));
    animation: squishy_slime .3s ease-in-out infinite;
    transition: .5s;
    pointer-events: all;
    cursor: pointer;
}
#slime_C{
    display: block;
    position: relative;
    width: 120px;
    height: 100px;
    margin-top: 100px;
    border-radius: 50%;
    background-image: radial-gradient(rgba(0,200,255,0.8) 10%,rgba(0,200,255,0.6));
    animation: squishy_slime .3s ease-in-out infinite;
    transition: .5s;
    z-index: 2;
    pointer-events: all;
    cursor: pointer;
}
#slime_A::after{
    content: "";
    display: block;
    width: 120px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
    z-index: 1;
}
#slime_A::before{
    content: "";
    display: block;
    width: 120px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
    z-index: 1;
}
#slime_B::after{
    content: "";
    display: block;
    width: 120px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
}
#slime_B::before{
    content: "";
    display: block;
    width: 120px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
}
#slime_C::after{
    content: "";
    display: block;
    width: 120px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
}
#slime_C::before{
    content: "";
    display: block;
    width: 120px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
}
#slime_click_check{
    display: none;
}
#slime_click_check:checked ~ .slime_click_A div#slime_A{
    animation: bound_slime 1s ease-in-out infinite;
    transition: .5s;
}
#slime_click_check:checked ~ .slime_click_A span.shadow{
    animation: slime_shadow 1s ease-in-out infinite;
    transition: .5s;
}
#slime_click_check_B{
    display: none;
}
#slime_click_check_B:checked ~ .slime_click_B div#slime_B{
    animation: bound_slime 1s ease-in-out infinite;
    transition: .5s;
}
#slime_click_check_B:checked ~ .slime_click_B span.shadow{
    animation: slime_shadow 1s ease-in-out infinite;
    transition: .5s;
}
#slime_click_check_C{
    display: none;
}
#slime_click_check_C:checked ~ .slime_click_C div#slime_C{
    animation: bound_slime 1s ease-in-out infinite;
    transition: .5s;
}
#slime_click_check_C:checked ~ .slime_click_C span.shadow{
    animation: slime_shadow 1s ease-in-out infinite;
    transition: .5s;
}
@keyframes bound_slime{
    0%{transform: translateY(0) scaleY(1) scaleX(1.1);}
    10%{transform: translateY(-15px) scaleY(1)  scaleX(1);}
    50%{transform: translateY(-60px) scaleY(1)  scaleX(1);}
    90%{transform: translateY(-15px) scaleY(0.9)  scaleX(1);}
    100%{transform: translateY(0px) scaleY(0.8)  scaleX(1.1);}
}
@keyframes squishy_slime{
    0%,100%{transform:skewX(0deg)}
    25%{transform: skewX(5deg) scaleY(1);}
    50%{transform: skewX(0deg) scaleY(0.9);}
    75%{transform: skewX(-5deg)scaleY(1.1);}
}
@keyframes slime_shadow{
    0%,100%{transform: scale(1);}
    50%{transform: scale(0.9);}
}

.left_eye{
    display: block;
    position: absolute;
    top: 35px;
    left: 25px;
    width: 20px;
    height: 20px;
    background-image: radial-gradient(rgba(255,255,255,1) ,rgba(200,200,200,1));
    border-radius: 50%;
    z-index: -1;
}
.right_eye{
    display: block;
    position: absolute;
    top: 35px;
    right: 25px;
    width: 20px;
    height: 20px;
    background-image: radial-gradient(rgba(255,255,255,1) ,rgba(200,200,200,1));
    border-radius: 50%;
    z-index: -1;
}
.black_eye{
    display: block;
    width: 10px;
    height: 10px;
    margin: 5px;
    background-image: radial-gradient(rgba(30,30,30,1) ,rgba(0,0,0,1));
    border-radius: 50%;
    z-index: -1;
}
.mouth{
    display: block;
    position: absolute;
    top: 58px;
    right: 30px;
    width: 50px;
    height: 10px;
    margin: 5px;
    background: linear-gradient(rgba(255,0,0,0.6),rgba(255,0,0,0.9));
    border-radius: 10px; 
    z-index: -1;
}
.shadow{
    display: block;
    position: relative;
    top: 0px;
    left: 10px;
    width: 100px;
    height: 10px;
    border-radius: 50%;
    background-image:  radial-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0));
    animation:  slime_shadow 1s linear infinite;
    z-index: 1;
}
#slime_box{
    display: block;
    width: 150px;
    height: auto;
}