/*

The ceramic bowl

*/

.bowl{

    position:absolute;

    left:50%;
    bottom:14%;

    transform:translateX(-50%);

    width:500px;
    height:260px;

    z-index:20;

}

/* CONTACT SHADOW                           */

.bowl-shadow{

    position:absolute;

    left:50%;
    bottom:-12px;

    transform:translateX(-50%);

    width:360px;
    height:45px;

    border-radius:50%;

    background:

        radial-gradient(

            ellipse,

            rgba(0,0,0,.30) 0%,

            rgba(0,0,0,.12) 45%,

            transparent 75%

        );

    filter:blur(12px);

    animation: shadow-breathe 6s infinite ease-in-out;

}
@keyframes shadow-breathe{


    0%,
    100%{

        transform:

        translateX(-50%)

        scale(1);


        opacity:.7;

    }



    50%{


        transform:

        translateX(-50%)

        scale(.92);


        opacity:.5;

    }


}

/* OUTER CERAMIC                            */

.bowl-body{

    position:absolute;

    inset:0;

    border-radius:

        50% 50%

        42% 42%

        /

        65% 65%

        35% 35%;

    background:

        linear-gradient(

            180deg,

            #ffffff 0%,

            #f6f4ef 30%,

            #ebe7df 70%,

            #d8d1c8 100%

        );

    box-shadow:

        inset 0 10px 18px rgba(255,255,255,.95),

        inset 0 -14px 22px rgba(0,0,0,.10),

        0 22px 40px rgba(0,0,0,.14);

}

/* RIM                                      */

.bowl-body::before{

    content:"";

    position:absolute;

    left:20px;
    right:20px;
    top:18px;

    height:88px;

    border-radius:50%;

    background:

        linear-gradient(

            180deg,

            #ffffff,

            #ece7de

        );

    box-shadow:

        inset 0 5px 10px rgba(255,255,255,.95),

        inset 0 -8px 12px rgba(0,0,0,.08);

}

/* CERAMIC HIGHLIGHT                        */

.bowl-body::after{

    content:"";

    position:absolute;

    left:40px;

    top:36px;

    width:110px;

    height:150px;

    border-radius:50%;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.70),

            transparent

        );

    filter:blur(2px);

    opacity:.9;

}

/* INSIDE OF THE BOWL                       */

.bowl-inner{

    position:absolute;

    left:36px;
    right:36px;

    top:34px;

    height:120px;

    border-radius:50%;

    overflow:hidden;

    background:

        radial-gradient(

            circle at 50% 10%,

            #d7c9b6 0%,
            #b3a58f 38%,
            #9b8a75 70%,
            #7f7061 100%

        ) !important;

    box-shadow:

         inset 0 12px 18px rgba(255,255,255,.35),
        inset 0 -18px 24px rgba(0,0,0,.33) !important;
}