#three-container{
  margin-left:50px;
  position:absolute;
  background:url('https://images.unsplash.com/photo-1486078695445-0497c2f58cfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80');
  width:500px;
  height:700px;
  border:1px solid black;
}

img{
  position:absolute;
  display:block;
 width:80px;
  height:80px;
 border-radius:50%; 
  border:4px solid red;
  overflow:hidden;
  animation: globes 20s infinite;
}

@keyframes globes {
	0% {
    transform: translate(30px, 0px);
	}
  50%{
    transform: translate(-30px, -10px);
  }
	100% { 
    transform: translate(30px, 0px);
	}
}

.globe1{
  top:310px;
  left:100px;
}

.globe2{
   top:310px;
  left:310px;
}

.globe3{
   top:330px;
  left:205px;
}

.globe4{
   top:450px;
  left:60px;
}

.globe5{
   top:480px;
  left:205px;
}

.globe6{
   top:450px;
  left:350px;
}

#star{
  position:absolute;
  top:40px;
  left:200px;
  width:100px;
  height:100px;
  z-index:10;
  background-image: linear-gradient(45deg, #f4ff29 25%, #dce800 25%, #dce800 50%, #f4ff29 50%, #f4ff29 75%, #dce800 75%, #dce800 100%);
background-size: 28.28px 28.28px;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: star 20s infinite;
}

@keyframes star {
	0% {
    transform: translate(30px, 0px);
		background-position: 0px  0px;
	}
  50%{
    transform: translate(-30px, -10px);
  }
	100% { 
    transform: translate(30px, 0px);
		background-position: 200px 0px;
	}
}

#three{
  position:absolute;
  left:50px;
  top:100px;
  width:400px;
  height:700px;
  background-image: linear-gradient(5deg, #1a9900 25%, #00ab17 25%, #00ab17 50%, #1a9900 50%, #1a9900 75%, #00ab17 75%, #00ab17 100%);
background-size: 49.44px 68.05px;
  clip-path: polygon(50% 0%, 80% 30%, 70% 30%, 90% 50%, 80% 50%, 100% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 20% 50%, 10% 50%, 30% 30%, 20% 30%);
    -webkit-clip-path: polygon(50% 0%, 80% 30%, 70% 30%, 90% 50%, 80% 50%, 100% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 20% 50%, 10% 50%, 30% 30%, 20% 30%);
  animation: three 20s infinite;
}

@keyframes three {
	0% {
		background-position: 0px  0px;
    clip-path: polygon(58% 1%, 88% 31%, 78% 31%, 98% 51%, 88% 51%, 102% 71%, 60% 71%, 60% 81%, 40% 81%, 40% 71%, 0% 71%, 22% 51%, 12% 51%, 32% 31%, 22% 31%);
    -webkit-clip-path: polygon(58% 0%, 88% 30%, 78% 30%, 98% 50%, 88% 50%, 102% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 22% 50%, 12% 50%, 32% 30%, 22% 30%);
	}
  50%{
    clip-path: polygon(42% -1%, 72% 29%, 62% 29%, 82% 49%, 72% 49%, 92% 69%, 60% 69%, 60% 79%, 40% 79%, 40% 69%, 0% 69%, 12% 49%, 2% 49%, 22% 29%, 12% 29%);
    -webkit-clip-path: polygon(42% 0%, 72% 30%, 62% 30%, 82% 50%, 72% 50%, 92% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 12% 50%, 2% 50%, 22% 30%, 12% 30%);
  }
	100% { 
      clip-path: polygon(58% 1%, 88% 31%, 78% 31%, 98% 51%, 88% 51%, 102% 71%, 60% 71%, 60% 81%, 40% 81%, 40% 71%, 0% 71%, 22% 51%, 12% 51%, 32% 31%, 22% 31%);
    -webkit-clip-path: polygon(58% 0%, 88% 30%, 78% 30%, 98% 50%, 88% 50%, 102% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 22% 50%, 12% 50%, 32% 30%, 22% 30%);
		background-position: 0px  200px;
	}
}