html {
 background-color: yellow;
box-sizing: border box; 
 zoom: 50%;
 margin: 50px;
}

.escena {
  width: 2100px;
  height: 800px;
  background-color: white;  
  border: 3px solid black;
  margin: 25px;
  justify-content: center;
  margin-left:  90px;
  margin-right: 90px;
  display: block;
  padding: 0px;
  overflow: auto; 
  background-image: url('terreno2.png');
  background-size: cover;  
  background-repeat: repeat-x;
  overflow-y: auto;
  position:relative;
}

.control {
	border: 3px solid blue;
	background-color: forestgreen; 
	margin: 0px;
	margin-right: 0px;
	padding: 50px;
	height: 1350px;
	width: 2277px;
	position: relative;
}

.control2 {
	 padding: 24px 48px; /* First number is top/bottom, second is left/right */
     font-size: 36px;    /* Makes the text larger */
	 justify-content: center;
     position: absolute;
	 bottom: 0px; 
	left: 360px;
}

.up  {
     padding: 12px 24px; /* First number is top/bottom, second is left/right */
     font-size: 18px;    /* Makes the text larger */
	 justify-content: center;
	 display:flex;
	 align-items: center;
	 font-size: 38px;
	 width: 200px;
	 height: 100px;
	 position: absolute;
	 bottom: 450px; 
	 left: 960px;
}

.down {
	padding: 12px 24px; /* First number is top/bottom, second is left/right */
    font-size: 18px;    /* Makes the text larger */
    justify-content: center;
	display:flex;
	align-items: center;
	font-size: 38px;
	width: 200px;
	height: 100px;
    position: absolute;
	bottom: 340px; 
	left: 960px;
}

.left {
	font-size: 38px;
	width: 200px;
	bottom: 360px; 
	left: 740px;
}
.right{
	font-size: 38px;
	width: 200px;
	bottom: 360px; 
	left: 1180px;
}
.start {
	font-size: 68px;
	bottom: 362px; 
	left: 460px;
}

.home {
	font-size: 58px;
	bottom: 372px; 
	left: 160px;
	background-color: orange;
	color: white;
}
.android17 {
	object-fit: contain;
	width: 300px;
	height: auto;
	margin: 20px;
	border: solid 0px  black;
	box-shadow: 0px 0px 0px 0px green;
	position: absolute;
	bottom: -20px; 
	left: 0px;
    z-index: 99999;	
	}
	
.roshi {
	border: solid 0px  black;
	box-shadow: 0px 0px 0px 0px green;
	width: 300px;
	height: auto;
	position: absolute;
	bottom: 0px; 
	left: 360px;
	image-rendering: pixelated;
}	
	
	
	.android17:hover {
    /* Runs automatically on page load forever */
  animation: 0; 
}

.boo2 {
	width: 380px;
	height: 400px;
	position: absolute;
	left:  1315px;
	bottom: 175px;
	overflow: hidden;
	transition: transform 0.3s ease;
	image-rendering: pixelated;
}

.goku {
	position: absolute;
	background-color: transparent; /* Tu contenedor mide 300px (1 frame) */
	width: 300px;
	height: 300px;
	left: 0px;
	bottom: 400px;
	overflow: hidden;
	image-rendering: pixelated;
}

.goku-caminando {
	display: block;
	width: 2400px; /* 300px x 8 frames */
	height: 300px;
	object-fit: fill;
	/* La animación se aplica a la imagen interna, no al contenedor */
	animation: caminar 1s steps(8) infinite; 
}

@keyframes caminar {
	from {
		transform: translateX(0);
	}
	to {
		/* Corregido: Mueve la tira completa hacia la izquierda */
		transform: translateX(-2400px); 
	}
}

.goku.running .goku-caminando-sur {
    animation: caminar 1s steps(8) infinite;
}

.vegeta {
	position: absolute;
	left: 1715px;
	bottom: 5px;
    border: 0;
	width: 350px;
	height: 400px;
	margin: 0px;
	border: solid 0px  black;
	box-shadow: 0px 0px 0px 0px green;
	gap: 0px;
	image-rendering: pixelated;
	overflow: hidden;
	
}