.container {
    opacity: 0.9;
    width: 800px;
    height: 900px;
background-position-x:-250px ;
background-position-y:50px ;
    background-size: 1300px;
    position: relative;
    overflow: hidden;
    
}

.cup {
    width:395px;
    height: 550px;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    position: absolute;
    top: 180px;
    left: 202px;
    background: rgb(191,190,186);
background: linear-gradient(90deg, rgba(191,190,186,1) 0%, rgba(206,204,202,1) 22%, rgba(234,233,230,1) 66%, rgba(186,186,182,1) 98%);
    opacity:1;
    
    box-shadow: inset 114px -10px 46px 3px rgba(0,0,0,0.75);
    z-index: 8;
}

.top {
    width:422px;
    height: 150px;
    border-bottom: 5px solid #aeafa7;
    position: absolute;
    top: 80px;
    left: 190px;
    background: rgb(202,202,195);
    background: linear-gradient(90deg, rgba(202,202,195,1) 0%, rgba(220,219,214,1) 22%, rgba(238,237,233,1) 47%, rgba(209,207,204,1) 89%, rgba(161,157,148,1) 100%);
    opacity:1;
    overflow: hidden;
    border-radius: 50%;
    z-index: 11;
    box-shadow: 0px 13px 21px 0px rgba(0,0,0,0.5);
}

.top-inner {
    width:400px;
    height: 125px;
    border-right: 5px solid #8b887f;
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgb(246,245,241);
    background: linear-gradient(90deg, rgba(246,245,241,1) 0%, rgba(247,246,244,1) 33%, rgba(232,228,225,1) 61%, rgba(149,147,139,1) 80%, rgba(79,74,65,1) 100%);
    opacity:1;
    overflow: hidden;
    border-radius: 50%;
    z-index: 11;
}

.coffee {
    width:400px;
    height: 125px;

    position: absolute;
    top: 55px;
    left: 10px;
    background: rgb(105,91,82);
background: linear-gradient(90deg, rgba(105,91,82,1) 0%, rgba(74,65,59,1) 41%, rgba(52,43,36,1) 69%, rgba(52,30,22,1) 98%);
    opacity:2;
    overflow: hidden;
    border-radius: 50%;
    z-index: 11;
    border-top: 5px solid #ba8c4e;
box-shadow: 0px 1px 21px 0px #d3ac51, inset 0px -69px 41px 0px #231c16,  inset 1px 7px 30px 13px #7d5238;
}


.bottom {
    width:240px;
    height: 70px;
    z-index: 5;
    position: absolute;
    bottom: 145px;
    left: 280px;
    background: red;
    opacity:1;
    overflow: hidden;
    border-radius: 0% 0% 50% 50% / 50% 50% 50% 50%;
    background: rgb(191,190,186);
    background: linear-gradient(90deg, rgba(191,190,186,1) 0%, rgba(206,204,202,1) 22%, rgba(234,233,230,1) 66%, rgba(186,186,182,1) 98%);
    box-shadow: inset 10px -28px 10px 3px rgba(0,0,0,0.6),  -63px 10px 80px 80px rgba(0,0,0,0.4), -32px 17px 46px 7px rgba(0,0,0,0.75);
}

.logo {
    position: absolute;
    top: 105px;
    left: 80px;
    opacity: 0.7;
}