/*Image source: https://2.bp.blogspot.com/--88HjYhJpJw/UZ5akPNgjLI/AAAAAAAAC0Y/Jt0_doM1dKY/s1600/Life%2Bin%2BWorld%2BWar%2BII%2B(4).jpeg*/

body {
  margin: 0px;
  background-color: #dbdbdb;
}
#wrapper {
  position: fixed;
  inset: 0px;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
  overflow: hidden;
  width: 379px;
  height: 568px;
  box-shadow: 0px 0px 30px 5px rgba(0,0,0,.3);
  transform: rotate(-2deg); 
  border: 10px solid #fff;
}

/********BACKGROUND********/
.background, .dust, .foreground, .midground  {
  position: absolute;
  margin-left: -80px;
  z-index: 1;
  animation-name: background;
  animation-duration: 40s;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}


@keyframes background {
  0% {transform:translateX(0px) translateY(0px);}
  100% {transform:translateX(-130px) translateY(0px);}

}
  
  
/********FOREGROUND********/  
 .foreground {
  z-index: 3;
  -moz-animation-name: foreground;
  -ms-animation-name: foreground;
  -o-animation-name: foreground;
  -webkit-animation-name: foreground;
  animation-name: foreground;
}

@keyframes foreground { 
  0% { transform: scale(1); }
  100% { transform: scale(1.2) translateX(-60px); filter: blur(10px); }
}


/********MIDGROUND********/
.midground {
  z-index:2;
  -moz-animation-name: midground;
  -ms-animation-name: midground;
  -o-animation-name: midground;
  -webkit-animation-name: midground;
  animation-name: midground;
}

@keyframes midground { 
  0% { transform: scale(1); }
  100% { transform: scale(1.4) translateX(-100px) translateY(0px) rotate(5deg); }
}



/********DUST********/
.dust {
  z-index: 4;
  -moz-animation-name: dust;
  -ms-animation-name: dust;
  -o-animation-name: dust;
  -webkit-animation-name: dust;
  animation-name: dust;
}
@keyframes dust { 
  0% { transform: scale(1); }
  100% { transform: scale(2) translateX(10px) translateY(0px); filter: blur(2px);}
}