body{
    background:white;
    color:#1f5aff;
    }
    #text{
      width:300px;
      margin:auto;
    }
    
    html {
        font-size: 1em;
        line-height: 1.4;
    }
    
    
    html,
    body {
        height: 100%;
    }
    
    body {
        margin: 0;
        padding: 0;
    }
    
    #coffee-wrap {
        width: 800px;
        height: 350px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    .mug,
    .machine,
    .floor {
        position: absolute;
    }
    
    .mug {
        width: 72px;
        height: 77px;
        bottom: 6px;
        z-index: 4;
    }
    
    .mug1 {
        opacity: 1;
        right: 100px;
        animation: new-mug 3.5s ease infinite;
    }
    
    .mug2 {
        opacity: 1;
        right: 220px;
        animation: jump-to-machine 3.5s linear infinite;
    }
    
    .mug3 {
        right: 377px;
        bottom: 46px;
        animation: filled-out 3.5s ease infinite;
    }
    
    .mug4{
        right: 540px;
        animation: go-out 3.5s ease infinite;
    }
    
    .svg-mug {
        width: 100%;
        height: 100%;
    }
    
    .mug .cream {
        animation: mug-fill-cream 3.5s ease infinite;
    }
    
    .mug .coffee {
        animation: mug-fill-coffee 3.5s ease infinite;
    }
    
    .machine {
        width: 173px;
        height: 285px;
        bottom: 6px;
        left: 300px;
        z-index: 2;
        transform: scale(1);
        transform-origin: bottom center;
        animation: machine-coffee 3.5s ease infinite;
    }
    
    #hot-coffee-wrap {
        position: absolute;
        bottom: 56px;
        right: 408px;
        height: 100px;
        width: 20px;
        overflow: hidden;
        z-index: 2;
        animation: hot-coffee-wrap 3.5s ease infinite;
    }
    
    .last-drop {
        width: 10px;
        height: 10px;
        display: block;
        position: absolute;
        bottom: 30px;
        left: 8px;
        border-radius: 50%;
        background: #AB4D37;
        animation: last-drop 3.5s ease infinite;
    }
    
    #hot-coffee-down {
        transform: translateY(0);
        animation: hot-coffee-down 3.5s ease infinite;
    }
    
    .olhos {
        animation: olhos 3.5s ease infinite;
    }
    
    #boca-encher {
        animation: boca-encher 3.5s ease infinite;
    }
    
    #boca-sopro {
        opacity: 0;
        animation: boca-sopro 3.5s ease infinite;
    }
    
    #boca-pronto {
        opacity: 0;
        animation: boca-pronto 3.5s ease infinite;
    }
    
    .svg-machine {
        width: 100%;
        height: 100%;
    }
    
    .stars {
        display: block;
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 20%;
        background: #F9D67D;
        opacity: 0;
        bottom: 0;
        left: 0;
    }
    
    .star1 {
        opacity: 0;
        transform: translate(500px, -120px) scale(0.2);
        animation: star1 3.5s ease infinite;
    }
    
    .star2 {
        opacity: 0;
        transform: translate(280px, -170px) scale(0.2);
        animation: star2 3.5s ease infinite;
    }
    
    .star3 {
        opacity: 0;
        transform: translate(500px, -250px) scale(0.2);
        animation: star3 3.5s ease infinite;
    }
    
    
    
    /* Floor */
    .floor {
        width: 538px;
        height: 10px;
        bottom: 6px;
        left: 120px;
        z-index: 0;
    }
    
    .svg-floor {
        width: 100%;
        height: 100%;
    }
    
    /* MUG 1 */
    
    @keyframes new-mug {
        0% {
            opacity: 1;
            right: 220px;
        }
    
        21.25% {
            opacity: 1;
            right: 220px;
        }
        21.30% {
            opacity: 0;
            right: 100px;
        }
        31.25% {
            opacity: 0;
            right: 100px;
        }
    
        34% {
            opacity: 1;
        }
    
        37.5% {
            right: 220px;
        }
        100% {
            opacity: 1;
            right: 220px;
        }
    
    }
    
    
    /* MUG 2 */
    
    @keyframes jump-to-machine {
        
        0% {
            opacity: 0;
        }
    
        21.2% {
            opacity: 0;
        }
    
        21.25% {
            opacity: 1;
            bottom: 6px;
            right: 220px;
        }
        
        39.95% {
            opacity: 1;
            bottom: 46px;
            right: 377px;
        }
        40% {
            opacity: 0;
            bottom: 6px;
            right: 220px;
        }
    
    }
    
    /* MUG 3 */
    
    @keyframes mug-fill-coffee {
        0% {
            y: 30;
            height: 47px;
            opacity: 1;
        }
    
        30% {
            y: 30;
            height: 47px;
            opacity: 1;
        }
        30.1% {
            opacity: 0;
            y: 70;
            height: 0px;
        }
        40.9% {
            opacity: 0;
        }
        41% {
            opacity: 1;
            y: 70;
            height: 0px;
        }
    
        80% {
            y: 30;
            height: 47px;
            opacity: 1;
        }
    
        100% {
            y: 30;
            height: 47px;
            opacity: 1;
        }
    }
    
    @keyframes mug-fill-cream {
        0% {
            y: 20;
            height: 10px;
            opacity: 1;
        }
    
        30% {
            y: 20;
            height: 10px;
            opacity: 1;
        }
        30.1% {
            y: 70;
            height: 0px;
            opacity: 1;
        }
        41% {
            y: 70;
            height: 0px;
            opacity: 1;
        }
    
        80% {
            y: 20;
            height: 10px;
            opacity: 1;
        }
    
        100% {
            y: 20;
            height: 10px;
            opacity: 1;
        }
    
    
    }
    
    @keyframes filled-out {
        0% {
            opacity: 1;
        }
        10% {
            bottom: 46px;
            right: 377px;
            opacity: 1;
        }
        30% {
            bottom: 6px;
            right: 540px;
            opacity: 1;
        }
        30.1% {
            opacity: 0;
        }
        39.9% {
            opacity: 0;
            bottom: 46px;
            right: 377px;
        }
        40% { opacity: 1; }
        100% { opacity: 1; }
    
    }
    
    
    /* MUG 4 */
    
    @keyframes go-out {
        0% {
            opacity: 1;
        }
        7% {
            bottom: 6px;
            right: 540px;
            opacity: 1;
        }
        13% {
            bottom: 6px;
            right: 620px;
            opacity: 0;
        }
        30%  { opacity: 0; right: 540px; }
        30.1%  { opacity: 1 }
        100% { opacity: 1}
    }
    
    /* Coffee */
    
    
    @keyframes hot-coffee-wrap {
        0% {
           
            
        }
        39% {
    
        }
        40% {
            height: 105px;
        }
    
        70% {
            height: 84px;
            
        }
    
        71% {
    
           
        }
    }
    
    @keyframes hot-coffee-down {
        0% {
            opacity: 0;
            transform: translateY(0);
        }
        39% {
             opacity: 0;
        }
        40% {
            opacity: 1;
            transform: translateY(0);
        }
    
        70% {
             opacity: 1;
            transform: translateY(600px);
        }
    
        71% {
            opacity: 0;
            transform: translateY(0);
        }
    }
    
    @keyframes last-drop {
        0% {
            opacity: 0;
        }
    
        64% {
            opacity: 0;
            transform: translateY(0);
        }
    
        66% {
            opacity: 1;
        }
    
        71% {
            opacity: 1;
            transform: translateY(-40px);
        }
        
        76% {
            opacity: 1;
            transform: translateY(0px);
        }
    
        77% {
            opacity: 0;
        }
        100% {
           opacity: 0;
        }
    
    }
    
    
    
    /* Machine */
    
    @keyframes machine-coffee {
        0% {
            
        }
    
        25% {
            /*width: 165px;
            height: 300px;
            margin-left: 0;*/
            transform: scale(0.95, 1.07);
        }
    
        40% {
           /*width: 165px;
            height: 300px;
            margin-left: 0;*/
            transform: scale(0.95, 1.07);
        }
    
    
        75% {
            /*width: 183px;
            height: 265px;*/
            transform: scale(1.05, 0.92);
        }
    
        100% {
            
        }
    }
    
    @keyframes olhos {
        3.75% {
            /* cy: 78.666; */
            opacity: 1;
        }
        3.80% { opacity: 0; }
        6% { opacity: 0; }
        6.1% { opacity: 1; }
    
        10% {
            /*cy: 74.666;*/
        }
    
        25% {
            
        }
    
        40% {
            /*cy: 74.666;*/
        }
        71% {
            /*cy: 83.666;*/
        }
    
        89% {
            /*opacity: 1;*/
        }
        90% {
            /*opacity: 0;*/
        }
    
        93% {
            /*opacity: 0;*/
        }
        94% {
            /*opacity: 1;*/
        }
    
        100% {
            
        }
    }
    
    @keyframes boca-encher {
        0% {
            opacity: 1;
            r: 2.666;
        }
    
        30% {
            r: 14;
            opacity: 1;
        }
    
        38% {
            r: 14;
            opacity: 1;
        }
        39% {
            opacity: 0;
        }
    
        25% {
            
        }
    
        40% {
            
        }
    
    
        75% {
            
        }
    
        100% {
             opacity: 0;
        }
    }
    
    @keyframes boca-sopro {
        0% {
            opacity: 0;
        }
    
        38% {
            opacity: 0;
        }
        39% {
            opacity: 1;
            transform: translateY(0);
        }
    
        74% {
            opacity: 1;
            transform: translateY(12px);
        }
        75% {
            opacity: 0;
        }
    }
    
    @keyframes boca-pronto {
        0% { opacity: 0; }
        74% { opacity: 0; }
        75% { opacity: 1; }
        100% { opacity: 1; }
    }
    
    @keyframes star1 {
        0% { opacity: 0; }
        28% { opacity: 0; }
        30% {
            opacity: 1;
            transform: translate(500px, -120px) scale(0.2) rotate(-45deg);
        }
        40% {
            opacity: 1;
            transform: translate(500px, -120px) scale(1) rotate(-45deg);
        }
        50% {
            transform: translate(500px, -120px) scale(0.2) rotate(-45deg); 
            opacity: 1;
        }
        51% { opacity: 0; }
        100% { opacity: 0; }
    }
    
    @keyframes star2 {
        0% { opacity: 0; }
        43% { opacity: 0; }
        45% {
            opacity: 1;
            transform: translate(280px, -170px) scale(0.2) rotate(-45deg);
        }
        55% {
            opacity: 1;
            transform: translate(280px, -170px) scale(1) rotate(-45deg);
        }
        65% {
            transform: translate(280px, -170px) scale(0.2) rotate(-45deg);
            opacity: 1;
        }
        66% { opacity: 0; }
        100% { opacity: 0; }
    }
    
    @keyframes star3 {
        0% { opacity: 0; }
        53% { opacity: 0; }
        55% {
            opacity: 1;
            transform: translate(500px, -210px) scale(0.2) rotate(-45deg);
        } 
        65% {
            opacity: 1;
            transform: translate(500px, -210px) scale(1) rotate(-45deg);
        }
        75% {
            transform: translate(500px, -210px) scale(0.2) rotate(-45deg);
            opacity: 1;
        }
        76% { opacity: 0; }
        100% { opacity: 0; }
    }