@import url('https://fonts.googleapis.com/css2?family=Barriecito&display=swap');
@keyframes myufo {
    0%   {left:10%; top:10%;}
    25%  {left: calc(90% - 360px); top:30%;}
    50%  {left:calc(90% - 360px); top:60%;}
    75%  {left:50%; top:50%;}
    100% {left:10%; top:10%;}
}

body {
    background-image: url("images/space.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left center;
    font-size: 16px;
    background-color: black;
}

#helloworld {
    font-family: "Barriecito", sans-serif;
    font-size: 5rem;
    color: white;
    left: 300px;
    top: 50%;
    position: absolute;
    z-index: 1;
}

#ufo {
    background-image: url("images/alien-in-unfo.gif");
    width: 360px;
    height: 360px;
    position: relative;
    animation-name: myufo;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    z-index: 2;
}