html {
	background-color: yellow;
	margin: 20px;
	margin-right: 100px;
	margin-left: 100px;
	margin-top: 100px;
 
	zoom: 50%;
	
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;               /* 100% del ancho real de la pantalla */
  height: 100%;              /* 100% del alto real de la pantalla */
  z-index: 9999;              /* Por encima de todo */
  margin: 0;
  
  /* 🖼️ Configuración del Fondo (Equivalente a object-fit: cover) */
  background-image: url('logo2.jpg');
  background-repeat: no-repeat;
  background-position: center; /* Centra la imagen perfectamente */
  background-size: cover;      /* Obliga a la imagen a cubrir la pantalla sin deformarse */
  background-color: #ffffff;   /* Cambia 'transparent' por un color si no quieres ver el fondo mientras carga */

  /* ✨ Animaciones y Transiciones */
  transition: opacity 1s ease; 
  opacity: 0;                  /* Inicia invisible para la animación */
  animation: aparecerSuave 4s ease-out forwards; 
}

/* 📱 Cambio de imagen para pantallas móviles (Menores a 767px) */
@media (max-width: 767px) {
  #loader {
	zoom: 75%;  
    background-image: url('logo3.jpg'); /* Tu loader de móvil */
    background-size: cover;             /* Mantiene el comportamiento de pantalla completa */
  }
}

/* 🎥 Asegúrate de tener definidos tus keyframes para que funcione la animación */
@keyframes aparecerSuave {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}





button {
    cursor: pointer;
    background-color: orange;
	color: white;
	padding: 24px 48px;
	font-size: 36px;
	
		}

button:hover {
	color: green;
}

.intro {
	margin-left: 120px;
}

.team {
	width: 800px;
	height: auto;
	margin: 20px;
	border: solid 3px  black;
	box-shadow: 0px 0px 3px 3px green;
	gap: 0px;
}



.seccion1 {
	display: flex;
	gap: 150px;
	margin: 0px ;
	}
	
.gif {
	position: relative;
    display: grid;
}	



img {
	width: 800px;
	height: auto;
	margin: 20px;
	border: solid 3px  black;
	box-shadow: 0px 0px 3px 3px green;
}


img:hover {
  
  /* Runs automatically on page load forever */
  animation: shake 4s ease infinite; 
}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-3px, -2px) rotate(-1deg); }
  20% { transform: translate(3px, 2px) rotate(1deg); }
  30% { transform: translate(-3px, 1px) rotate(0deg); }
  40% { transform: translate(2px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(2px, 1px) rotate(0deg); }
  70% { transform: translate(-2px, -1px) rotate(1deg); }
  80% { transform: translate(1px, 2px) rotate(-1deg); }
  90% { transform: translate(-2px, 1px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.aura {
	margin-left: 120px;
	background-color: skyblue;
}

.aura2 {
	background-color: skyblue;
}

button:active {
  
	 transform: translateY(4px); 
}

.desktop {
	position: absolute;
	left: 40px;
	bottom: 700px;
	font-size: 76px !important;
	
}

@media (max-width: 500px){
	
.desktop {
	display: none;
}
	
}

.boo2 {
	border: 0;
	width: 700px;
	height: 700px;
	margin: 0px;
	border: solid 0px  black;
	box-shadow: 0px 0px 0px 0px green;
	gap: 0px;
	image-rendering: pixelated;
	position: absolute;
	left: 80px;
	bottom: 200px;
}

.mobile {
	position: absolute;
	left: 40px;
	bottom: 460px;
	font-size: 83px !important;
	
}

.seccion4 {
      display: flex;	
	  gap: 150px;
}

.frieza {
	   position: absolute;
	   display: block;
	   left: 0px;
	   bottom: 800px;
	   width: 800px;
	   height: 600px;
}

.seccion5 {
    display: flex;
    gap: 150px; /* This will now work perfectly */
}

.broly {
    /* Removed absolute positioning */
    margin-left: 0px; /* Use margin instead of left */
    align-self: flex-end; /* Keeps it at the bottom of the flex container */
}

.broly3 {
    	height: 1400px;
		margin-top: 20px;
		transform: scaleX(-1);
}

.broly2 {
	position: absolute;
	left: 00px;
	bottom: 0px;
    border: 0;
	width: 700px;
	height: 700px;
	margin: 0px;
	border: solid 0px  black;
	box-shadow: 0px 0px 0px 0px green;
	gap: 0px;
	image-rendering: pixelated;
	position: absolute;
	left: 80px;
	bottom: 0px;
	transform: scaleX(-1);
}

.broly4 {
    	height: 800px;
		margin-top: 10px;
		transform: scaleX(-1);
}

.explore {
	    font-size: 76px !important;
		position: absolute;
		left: 190px;
	    bottom: 220px;
		
}

.vegeta {
	position: absolute;
	left: 700px;
	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;
	
}