@import url("https://fonts.googleapis.com/css?family=Share Tech Mono");

body {
  background-image: url("ds.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

header > h1 {
  text-align: center;
  font-family: "Share Tech Mono", cursive;
  color: #fff;
  font-size: 3rem;
  text-shadow: 3px 3px 5px #0ac7ca;
  margin-top : 50px;
}

#astronaut > img {
  padding-top: 150px;
  display: block;
  left: 60%;
  animation: anim 20s linear infinite;
  position: absolute;
}

#astronaut2 > img {
  padding-top: 150px;
  display: block;
  left: 15%;
  position: absolute;
  animation: anim2 20s linear infinite;
  animation-delay: 1s;
}

@keyframes anim {
  0% {
    transform: translateY(0px);
  }
  10%{
    transform: translateY(30px) rotate(10deg);
  }
  20%{
    transform: translateY(60px) rotate(20deg);
  }
   30%{
    transform: translateY(90px) rotate(30deg);
  }
   40%{
    transform: translateY(120px) rotate(20deg);
  }
  50% {
    transform: translateY(150px) rotate(30deg);
  }
  60%{
    transform: translateY(120px) rotate(40deg);
  }
  70%{
    transform: translateY(90px) rotate(10deg);
  }
  80%{
    transform: translateY(60px) rotate(20deg);
  }
  90%{
    transform: translateY(30px) rotate(10deg);
  }
   100% {
    transform: translateY(0px);
  }
}

@keyframes anim2 {
  0% {
    transform: translateY(0px);
  }
  10%{
    transform: translateY(-30px) rotate(-10deg);
  }
  20%{
    transform: translateY(-60px) rotate(-20deg);
  }
   30%{
    transform: translateY(-90px) rotate(-10deg);
  }
   40%{
    transform: translateY(-120px) rotate(0deg);
  }
  50% {
    transform: translateY(-150px) rotate(-10deg);
  }
  60%{
    transform: translateY(-120px) rotate(0deg);
  }
  70%{
    transform: translateY(-90px) rotate(20deg);
  }
  80%{
    transform: translateY(-60px) rotate(10deg);
  }
  90%{
    transform: translateY(-30px) rotate(0deg);
  }
   100% {
    transform: translateY(0px);
  }
}