@charset "utf-8";
/* CSS Document */
@media only screen and ( min-width : 769px ) {
#astronaut{
	animation-name: astronautLoop;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 10s;
    position: fixed;
    bottom: 50px;
    left: 5%;
}
}
#astronaut img{ 
	transition: 3s;}

#astronaut img:hover{ 
	transform: rotate(360deg);  
  }
@media only screen and ( max-width : 768px ) {
	#astronaut img{width: 80px; }
	#astronaut{
		animation-name: astronautLoop;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 10s;
	position: fixed;
    bottom: 50px;
	width: 30%;
	right: 10%;
}
}
@keyframes astronautLoop {
    0% {
        transform: translate(0, 0)
    }
 20%{
        transform: translate(30%, -10%)
    }
40%{
        transform: translate(60% ,0px)
    }
60%{
        transform: translate(30%,-10%)
    }
80%{
        transform: translate(0px,0px)
    }
100% {
        transform: translate(-30% , 10%)
    }
}