body {
	margin:0;
	background:#000;
}

#bern {
	width:112px;
	height:150px;
	margin:auto;  
	background: url("../img/bern.png") repeat-x;  
	/* Aunque no es necesario (porque actúa así por defecto), especificamos repeat-x para hacer que la imagen se repita horizontalmente de forma indefinida */
	
	
	
	animation:walk 8s linear infinite;
	animation:walk 1s steps(6) infinite;
	position:relative;
	bottom:34px;
}




/* #alien { */
  /* width:112px; */
  /* height:156px; */
  /* margin:auto;   */
  /* background: url("../img/jason.png") repeat-x; */
  /* animation:walk 1s steps(4) infinite; */
  /* position:relative; */
  /* bottom:34px; */
/* } */



/*PARA BERN */

@keyframes walk {
  0% { background-position:0 }
  100% { background-position:-672px }
}

#sky {
  background:url(../img/sky.png) repeat-x;
  animation: movebg 9s linear infinite;
}

#sea {
  background:url(../img/sea.png) repeat-x;
  position:relative;
  /* top:145px; */
  bottom: -150px;
  animation: movebg 6s linear infinite;
    /* Pequeño degradado interior para suavizar el mar. 
     Puede consumir muchos recursos */
  box-shadow: 10px 10px 45px rgb(0,0,0, 0.85) inset;
}

/*PARA BERN */


@keyframes movebg {
  0% { background-position:550px }
  100% { background-position:0 }
}

#jason {
	width:112px;
	height:150px;
	margin:auto;  
	background: url("../img/jason.png") repeat-x;  
	animation:walk 8s linear infinite;
	animation:walk 1s steps(6) infinite;
	position:relative;
	bottom:34px;
}