#wrap{
    
    top: 35%;
    left: 40%;
    width: 30px;
}
#steam{
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50%;
    margin-left: 75px;
    margin-top: -75px;
    z-index: 0;
    opacity: 0;
}
.steam-one{
    animation: steam-one 4s ease-out infinite;
}
.steam-three{
    animation: steam-one 4s ease-out 1s infinite;
}
@keyframes steam-one{
    0%{transform: translateY(0) translateX(0) scale(0.25);
    opacity: 0.25;}
    100%{transform: translateY(-200px) translateX(-20px) scale(1);
        opacity: 0;}
}
.steam-two{
    animation: steam-two 4s ease-out 0.5s infinite;
}
.steam-four{
    animation: steam-two 4s ease-out 1.5s infinite;
}
@keyframes steam-two{
    0%{transform: translateY(0) translateX(0) scale(0.25);
    opacity: 0.25;}
    100%{transform: translateY(-200px) translateX(-20px) scale(1);
        opacity: 0;}
}
.cup-body{
    position: absolute;
    margin-bottom: 50px;
    margin-left: 20px;
    width: 300px;
    height: 200px;
     background-color: #4b2818;
    border-radius: 0 0 150px 150px;
    overflow:hidden;
    z-index: 1;
}
.cup-shade{
    position: absolute;
    width: 300px;
    height: 300px;
    margin-left: 45%;
    margin-top: -10px;
    transform: rotate(50deg);
    background-color:rgb(66, 31, 5);
}
.cup-handle{
    position: relative;
    left: 165px;
    width: 75px;
    top: 12px;
    height: 80px;
    border-radius: 0 80px 150px 0;
    border: 15px solid #4b2818;
    margin-bottom: 95px;
    margin-left: 135px;
}
.saurce{
    
    top: 550px;
    width: 350px;
    height: 20px;
    border-radius: 0 0 150px 150px;
    background-color: #8d583f;
    z-index: 2;
}
.shadow{
    bottom: -4%;
    width: 340px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(226, 157, 124);
}