body{
    margin: 0;
    padding: 0;
    background : url(../img/spaceboy.gif);
}

.scene{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 400px;
    background: #3b93ff;
    border: 20px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    /*box-shadow: inset 0 0 100px rgba(0,0,0,.5);*/
    animation: animatescane 5s linear infinite;
}
.scene:before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    /*background: rgb(0,0,0,.3);*/
    z-index: 1;
}
.fa-rocket{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    color: #fff;
    font-size: 10em !important;
    animation: animaterocket .2s linear infinite;
    text-shadow: -10px 15px 10px rgb(0,0,0,.2);
}
.cloud{
    position: absolute;
    color: #ccc;
    animation: animateCloud 1s linear infinite;
}
.cloud1{
left: 10%;
font-size: 6em;
}
.cloud2{
left: 45%;
font-size: 3em;
z-index: -1;
animation-delay: -0,8;
}
.cloud3{
    right: 20%;
font-size: 5em;
animation-delay: -0,4;
}
@keyframes animaterocket{
    0%{
        transform: translate(-50%,-50%) rotate(-45deg) translate(0,0);
    }
    50%{
        transform: translate(-50%,-50%) rotate(-45deg) translate(-5px,-5px);
    }
    100%{
        transform: translate(-50%,-50%) rotate(-45deg) translate(0,0);
    }
}

@keyframes animateCloud{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(1000%);
    }
}

@keyframes animatescane{
/*
    0%{
        background: #b339ff;
    }
    30%{
        background: #b339ff;
    }
    70%{
        background: #b339ff;
    }
    100%{
        background: #b339ff;
    }

*/