.coffee-cup-wrapper{justify-content:center;align-items:center;width:50vmin;height:50vmin;display:flex;position:relative}#plate{background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:50vmin;height:50vmin;display:flex;position:relative;box-shadow:-2vmin 2vmin 5vmin 2vmin #0003,inset 0 0 0 .2vmin #ccc,inset 0 0 0 .5vmin #fafafa,inset 0 0 10vmin .1vmin #0003}#handle{z-index:2;background-color:#fff;border-radius:1vmin;width:10%;height:30%;position:absolute;top:65%;left:71%;transform:rotate(-43deg);box-shadow:-2vmin -1vmin 2vmin 0 #2525251a,0 0 0 .1vmin #6666661a,inset -1vmin 0 2vmin .1vmin #fff,inset 0 0 .5vmin .5vmin #bbb,inset 0 0 10vmin .1vmin #c3c3c333}#cup{z-index:1;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:65%;height:65%;display:flex;position:relative;box-shadow:-2vmin 2vmin 5vmin -2vmin #00000080,inset 0 0 .5vmin .2vmin #ccc,inset 0 0 0 1vmin #fafafa}#coffeBg{background:linear-gradient(45deg,#35210d 0%,#231105 100%);border-radius:50%;justify-content:center;align-items:center;width:80%;height:80%;display:flex;position:relative;overflow:hidden}#cupInner{z-index:1;background-color:#0000;border-radius:50%;width:80%;height:80%;position:absolute;box-shadow:0 0 .3vmin #000,0 0 .5vmin 2.5vmin #dedede,inset 0 0 .4vmin .1vmin #00000080}#foamWrapper{filter:url(#goo)drop-shadow(0 0 3px #b37a3c);backface-visibility:hidden;width:100%;height:100%;position:absolute}.foam{filter:url(#scatter);background-color:#f8c99d;border-radius:50%;width:10%;height:40%;position:absolute;top:22%;left:-3%;transform:rotate(21deg);box-shadow:inset 0 0 .1vmin .2vmin #35210d33}#foam2{width:6%;top:-7%;left:14%;transform:rotate(53deg)}#foam3{top:-21%;left:43%;transform:rotate(75deg)}#foam4{top:-20%;left:46%;transform:rotate(105deg)}#foam5{height:30%;top:-9%;left:70%;transform:rotate(122deg)}#foam6{width:5%;height:60%;top:8%;left:98%;transform:rotate(152deg)}#foam7{width:5%;height:60%;top:20%;left:97%;transform:rotate(181deg)}#foam8{width:5%;height:40%;top:51%;left:96%;transform:rotate(211deg)}#foam9{width:5%;height:80%;top:62%;left:70%;transform:rotate(224deg)}#foam10{width:5%;height:50%;top:72%;left:62%;transform:rotate(74deg)}#foam11{width:4%;height:80%;top:59%;left:51%;transform:rotate(104deg)}#foam12{width:4%;height:80%;top:44%;left:9%;transform:rotate(124deg)}#foam13{width:4%;height:80%;top:7%;left:-6%;transform:rotate(-26deg)}@keyframes foamMiddleAnimation{0%{transform:translate(0%)}10%{transform:translate(0%)}50%{transform:translate(45%,20%)}90%{transform:translate(45%,20%)}to{transform:translate(45%,20%)}}#foamMiddleWrapper{will-change:transform, opacity;width:100%;height:100%;animation-name:foamMiddleAnimation;animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;position:absolute;top:0;left:0}@keyframes foamMiddleContainerAnimation{0%{transform:rotate(0)}55%{transform:rotate(30deg)}90%{transform:rotate(30deg)}to{opacity:0}}#foamMiddleContainer{will-change:transform, opacity;width:100%;height:100%;animation-name:foamMiddleContainerAnimation;animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;position:absolute;top:0;left:0}.foamMiddle{filter:url(#scatter);background-color:#f8c99d;border-radius:50%;width:13%;height:18%;position:absolute;top:40%;left:40%;transform:rotate(21deg);box-shadow:inset 0 0 .1vmin .2vmin #35210d33}#foamMiddle2{width:10%;left:47%;transform:rotate(-49deg)}@keyframes bubbleMiddle1Animation{0%{transform:scale(1)translate(0%)}35%{transform:scale(1)translate(60%,40%)}45%{transform:scale(0)translate(60%,40%)}to{transform:scale(0)translate(60%,40%)}}#bubbleMiddle1{will-change:transform;width:7%;height:7%;animation-name:bubbleMiddle1Animation;animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;top:48%;left:50%}@keyframes bubbleMiddle2Animation{0%{transform:scale(1)translate(0%)}39%{transform:scale(1)translate(10%,10%)}49%{transform:scale(0)translate(10%,10%)}to{transform:scale(0)translate(10%,10%)}}#bubbleMiddle2{will-change:transform;width:6%;height:7%;animation-name:bubbleMiddle2Animation;animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;top:40%;left:44%;transform:rotate(50deg)}@keyframes bubbleMiddle3Animation{0%{transform:scale(1)translate(0%)}45%{transform:scale(1)translate(0%)}55%{transform:scale(0)translate(0%)}to{transform:scale(0)translate(50%,-40%)}}#bubbleMiddle3{will-change:transform;width:7%;height:8%;animation-name:bubbleMiddle3Animation;animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;top:49%;left:41%;transform:rotate(36deg)}#bubbleMiddle4{width:2%;height:2%;top:45%;left:51%;transform:rotate(36deg)}.bubble{background-color:#35210d;border-radius:50%;width:5%;height:7%;position:absolute;top:40%;left:2%;box-shadow:0 0 .1vmin 0 #35210d,inset 0 0 .5vmin .2vmin #662e22}.bubble:after{content:"";background-color:#fff;border-radius:50%;width:25%;height:25%;display:block;position:absolute;top:12%;right:23%;transform:rotate(-20deg);box-shadow:0 0 .3vmin 0 #fff}#bubble2{top:30%;left:5%;transform:rotate(25deg)}#bubble3{width:3%;height:5%;top:23%;left:8%;transform:rotate(39deg)}#bubble4{width:5%;height:7%;top:43%;left:94%;transform:rotate(-10deg)}#bubble5{width:3%;height:4%;top:37%;left:95%;transform:rotate(-17deg)}#bubble6{width:6%;height:9%;top:0%;left:39%;transform:rotate(76deg)}#bubble7{width:4%;height:7%;top:1%;left:60%;transform:rotate(106deg)}#bubble8{width:4%;height:7%;top:91%;left:35%;transform:rotate(106deg)}#bubble9{width:5%;height:7%;top:63%;left:4%;transform:rotate(-23deg)}#bubble10{width:3%;height:4%;top:58%;left:2%;transform:rotate(-18deg)}#bubble11{width:4%;height:6%;top:91%;left:63%;transform:rotate(72deg)}#bubble12{width:4%;height:6%;top:3%;left:31%;transform:rotate(68deg)}#bubble13{width:4%;height:6%;top:85%;left:21%;transform:rotate(118deg)}#bubble14{width:4%;height:6%;top:53%;left:95%;transform:rotate(373deg)}#bubble15{width:3%;height:5%;top:0%;left:50%;transform:rotate(96deg)}.bubbleSmall{background-color:#35210d;border-radius:50%;width:1%;height:2%;position:absolute;top:48%;left:1%;box-shadow:0 0 .1vmin 0 #35210d,inset 0 0 .5vmin .2vmin #662e22}.bubbleSmall:after{content:"";opacity:.8;background-color:#fff;border-radius:50%;width:25%;height:25%;display:block;position:absolute;top:12%;right:23%;transform:rotate(-20deg);box-shadow:0 0 .3vmin 0 #fff}#bubbleSmall2{height:1%;top:37%;left:3%}#bubbleSmall3{height:1%;top:28%;left:6%}#bubbleSmall4{height:1%;top:35%;left:96%}#bubbleSmall5{height:1%;top:96%;left:60%}#bubbleSmall6{height:1%;top:72%;left:8%}#innerShadow{background:linear-gradient(45deg,#0000 0%,#00000038 100%);border-radius:50%;width:100%;height:100%;position:absolute}#glow{z-index:10;background:linear-gradient(45deg,#fff0 0% 20%,#ffffff42 90%,#ffffffe6 100%);border-radius:50%;width:80%;height:80%;position:absolute}@keyframes steam1{0%{opacity:0;transform:translate(0)translateY(0)scale(.5)}15%{opacity:.2}80%{opacity:.15}to{opacity:0;transform:translate(15%)translateY(-200%)scale(1.5)}}@keyframes steam2{0%{opacity:0;transform:translate(0)translateY(0)scale(.4)}15%{opacity:.18}80%{opacity:.12}to{opacity:0;transform:translate(-12%)translateY(-220%)scale(1.6)}}@keyframes steam3{0%{opacity:0;transform:translate(0)translateY(0)scale(.3)}15%{opacity:.15}80%{opacity:.1}to{opacity:0;transform:translate(8%)translateY(-180%)scale(1.4)}}#steamWrapper{z-index:15;pointer-events:none;width:140%;height:140%;position:absolute;top:-10%;left:-20%;overflow:visible}.steam-wisp{filter:blur(10px);background:radial-gradient(#dcd7d240 0%,#e6e1dc26 30%,#0000 70%);border-radius:50%;position:absolute}#steam{width:25%;height:35%;animation:5s ease-in-out infinite steam1;bottom:60%;left:30%}#steam2{width:20%;height:30%;animation:6s ease-in-out -2.5s infinite steam2;bottom:65%;left:50%}#steam3{width:30%;height:40%;animation:7s ease-in-out -4s infinite steam3;bottom:55%;left:40%}