body,
html {
  width:100%;
  height:100%;
  overflow:hidden;
}

.sky {
  background-color: #2c88f0;
  position: absolute;
  left:0
  right:0
  top:0
  bottom:0;
  width:100%;
  height:100%;
  z-index:0;
}
.viewport {
  position: absolute;
  left:0
  right:0
  top:0
  bottom:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:5;
}
.ground {
  width: 5000%;
  height: 20%;
  position:absolute;
  bottom:0;
  left:0;
  z-index:10;
}
.lawn {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    background-image: url(/images/lawn.jpg);
    background-repeat: repeat-x;
    background-size:contain;
    height: 10%;
}
.earth {
    position: absolute;
    top:10%;
    left:0;
    width: 100%;
    background-image: url(/images/earth.jpg);
    background-repeat:repeat;
    background-size: auto;
    height: 90%;
}
.cloud1, .cloud2, .cloud3 {
    position: absolute;
    top:25%;
    left:150%;
    width: 140px;
    z-index: 10;
}
.cloud1 img, .cloud2 img, .cloud3 img{
    position: absolute;
    top:0%;
    left:0%;
    width: 100%;
}
.cloud2 {
    width: 360px;
    top: 40%;
}
.cloud2 img{
    width:36%
}
.cloud2 .img1{
    left:25%;
}
.cloud3 {
    width: 540px;
    top: 70%;
}
.cloud3 img{
    width: 25%;
}
.cloud3 .img2{
    left:12.5%;
}
.cloud3 .img1{
    left:25%;
}
@media (max-width: 500px)
{
  .cloud1 {
      width: 22%;
  }
  .cloud2 {
      width: 60%;
  }
  .cloud3 {
      width: 90%;
  }
}

.headline1 {
  position:absolute;
  width: 300px;
  left: calc(50% - 150px);
  top:10%;
  z-index: 15;
  font-size: 25px;
  color: #000;
  text-transform: uppercase;
  text-align: center;
  height: 100px;
  line-height: 50px;
  vertical-align: middle;
  font-weight:bold;
  text-shadow: 8px 10px 10px rgba(20, 20, 20, 1);
}
.headline1 .name{
  font-size: 30px;
  color: #FFF;
  color: #000;
  text-transform: uppercase;
  text-shadow: 8px 10px 10px rgba(20, 20, 20, 1);
}

.player_container {
    position: absolute;
    left: calc(50% - 40px);
    position: absolute;
    left: calc(50% - 40px);
    width: 80px;
    height: 120px;
    bottom: 21%;
}
.player {
  position: absolute;
  left:0;
  width: 80px;
  bottom: 0;
  animation-name: hovering;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  z-index: 50;
}
.player img{
  width:100%;
  height: auto;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

@keyframes hovering {
  0% {
    bottom:0%;
  }
  50% {
    bottom:7%
  }
  100% {
    bottom:0%
  }
}