html {
   min-height: 100%
}

body {   
  background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 30%,#d1d1d1 51%,#fefefe 100%) no-repeat;
}

#circle-1 {
  width: 200px;
  height: 200px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0,0,0,0.2);
  position: absolute;
  top: 20px;
  left: 30px;
  animation: blur 10s infinite;
}

#circle-2 {
  width: 350px;
  height: 350px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0,0,0,0.2);
  position: absolute;
  top: 250px;
  left: 250px;
  animation: blur-2 10s infinite;
}

#circle-3 {
  width: 100px;
  height: 100px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0,0,0,0.2);
  position: absolute;
  top: 120px;
  left: 500px;
  animation: blur-3 10s infinite;
}

#circle-4 {
  width: 200px;
  height: 200px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0,0,0,0.2);
  position: absolute;
  top: 150px;
  left: 700px;
  animation: blur-4 10s infinite;
}

@keyframes blur {
  0%,100%   {   filter: blur(0px);
                background-color: whitesmoke;  
                transform: translate(50px,20px);
  }
  20%       {   filter: blur(3px);}
  50%       {   filter: blur(15px);
                background-color: #E8E8E8;
                transform: scale(.5); 
          
  }
}

@keyframes blur-2 {
  0%,100% {  
           filter: blur(16px);
           transform: scale(.9);
           background-color: #E8E8E8;
           transform: translate(170px,-40px);
  }

  50% {   
          filter: blur(0px);
          transform: scale(.7);
          background-color: whitesmoke;
  }
}

@keyframes blur-3 {
  0%,100% {   filter: blur(0px);
              background-color: whitesmoke;
              transform: translate(-50px,20px);
  }
  20% {       filter: blur(1px);}
  50% {       filter: blur(3px);
              transform: scale(.7); 
              background-color: #E8E8E8;
  }
}

@keyframes blur-4 {
  0%,100%   {  
          filter: blur(9px);
          transform: scale(.5);
          background-color: #E8E8E8;  
    
  }

  50% {   filter: blur(0px);
          transform: scale(.9);
          background-color: whitesmoke;
          transform: translate(-50px,0);
  }
}