.dust{
  position: absolute;
  background:black;
  height: 10em;
  width: 10em;
  border-radius: 50%;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 0.5em dashed #F5F5DC;
}
@media screen and (max-width:600px) {
	.dust {
		transform: translate(-50%, -50%) scale(0.7);
	}
}

.dust{
  animation: bounce 5s ease-out infinite;

  transition: all 0.75s 0s;
  transition-timing-function: cubic-bezier(.77,-0.7,.24,1.64);

  -webkit-transition: all 0.75s 0s;
  -webkit-transition-timing-function: cubic-bezier(.77,-0.7,.24,1.64);

  -moz-transition: all 0.75s 0s;
  -moz-transition-timing-function: cubic-bezier(.77,-0.7,.24,1.64);
}

.dust:hover {
  border-radius: 0%;
  animation-play-state: paused;
}

.dust::before{
  position: absolute;
  content:"";
  background: black;
  width:0.1em;
  height:100em;
  left: 50%;
  transform: translate(-100%,-100%);
}

.dust::after{
  animation: blink 5s ease-out infinite;
  position: absolute;
  content:"";
  background: black;
  height:0.1em;
  width:6em;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  z-index:1;  
}

.eye{
  position: absolute;
  background: white;
  border-radius:50%;
  width:2.2em;
  height:2.7em;
}

.left{
  top:2.7em;
  left:2em;
  transform: rotateZ(20deg);
}

.right{
  top:2.7em;
  right:2em;
  transform: rotateZ(-20deg);
}

.left::after{
  content:"";
  position: absolute;
  background: black;
  border-radius:50%;
  width: 1em;
  height: 1em;
  top:0.3em;
  right:0.3em;
}

.right::after{
  content:"";
  position: absolute;
  background: black;
  border-radius:50%;
  width: 1em;
  height: 1em;
  top:0.3em;
  left:0.3em;
}

body{
  background: #F5F5DC;
}

@keyframes blink {
  0%,45% {
    height: 0em;
  }
  48%, 80% {
    height: 1.3em;
  }
  100% {
    height: 0em;
  }
}

@keyframes bounce {
  0%,35% {
    top: 30%;
  }
  40%{
    top: 60%;
  }
  42%{
    top: 55%;
  }
  44%{
    top: 58%;
  }
  46%, 70%{
    top: 56%;
  }
}

body{
  height:100%;
}

footer{
  position: absolute;
  width:80%;
  bottom:7%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
@media screen and (max-width:600px) {
  footer{
    bottom:1.5%;
  }
}