@import url('https://fonts.googleapis.com/css?family=Lato');
 @import url('https://fonts.googleapis.com/css?family=Comfortaa');
body{
    background: #131313;
        color: rgb(240, 239, 239);
        font-family: 'Lato', sans-serif;
        font-size: 28px;
        font-weight: 300;
        line-height: 30px;
   
}
a {
    color: rgb(240, 239, 239);
    text-decoration: none;
}
.container-anime{
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    position: relative;
    height: 390px;
}

.foguete{
 position: absolute;
 z-index: 3;
margin: 40px auto 0;
    -webkit-animation: animation-foguete linear 12s infinite both;
    animation: animation-foguete linear 12s infinite both;
}
.fumaca{
position: absolute;
z-index: 2;
bottom: 50px;
-webkit-animation: animation-fumaca linear 6s infinite both;
    animation: animation-fumaca linear 6s infinite both;
}
.laptop{
position: absolute;
z-index:1;
top: 35px;
}


@keyframes animation-foguete {
    0% {
        transform: translate(0px, 0px);
        
    }

    15% {
        transform: translate(0px, -35px);
    }

    30% {
        transform: translate(0px, 0px);
    }

    45% {
        transform: translate(0px, -15px);
    }

    60% {
        transform: translate(0px, 0px);
    }

    75% {
        transform: translate(0px, -5px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}


@keyframes animation-fumaca {
    0% {
        transform: translate(0px, 0px);
        opacity: 0.9;
    }

    15% {
        transform: translate(0px, 1px);
        opacity: 0.9;
    }

    30% {
        transform: translate(0px, 2px);
        opacity: 0.9;
    }

    45% {
        transform: translate(0px, 2px);
        opacity: 0.9;
    }

    60% {
        transform: translate(0px, 2px);
        opacity: 1;
    }

    75% {
        transform: translate(0px, 1px);
        opacity: 1;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 0.95;
    }
}