body {
  background: #0000aa url("https://i.imgur.com/VkFSrsa.gif");
  background-size: 150px 150px; /* mosaico más chico */
  color: #ffff00;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

 #GIF1 {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000; /* siempre arriba de otros elementos */
    width: 100px; /* tamaño opcional, puedes cambiarlo */
    height: auto;
    pointer-events: none;
  }

 #GIF2 {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000; /* siempre arriba de otros elementos */
    width: 100px; /* tamaño opcional, puedes cambiarlo */
    height: auto;
    pointer-events: none;
    transform: scaleX(-1);
  }
  
h1 {
  font-size: 40px;
  text-shadow: 2px 2px #ff00ff;
  margin: 20px;
}

marquee {
  position: fixed;
  width: 100%;
  pointer-events: none;
  z-index: -1;  /* siempre detrás del contenido */
}

.marquee1 { top: 5%; }
.marquee2 { top: 15%; }
.marquee3 { left: 10%; height: 100%; }
.marquee4 { right: 10%; height: 100%; }
.marquee5 { top: 25%; }
.marquee6 { top: 35%; }
.marquee7 { left: 20%; height: 100%; }
.marquee8 { right: 20%; height: 100%; }
.marquee9 { top: 45%; }
.marquee10 { top: 55%; }

/* Contenedor de marquees al fondo */
.marquees-bg {
  position: fixed;
  inset: 0;              /* ocupa toda la pantalla */
  z-index: -1;           /* siempre detrás */
  pointer-events: none;  /* no bloquea clics */
}

/* Todos los marquees comparten estas reglas */
.marquees-bg marquee {
  position: absolute;
  width: 100%;
}


img {
  height: auto;
  margin: 10px;
}

table {
  max-width: 400px;      /* limita el ancho de la tabla */
  margin: 0 auto;        /* centra la tabla */
  border-collapse: separate;
  border-spacing: 10px;  /* espacio entre celdas */
}

.card {
  width: 500px;            /* ancho más pequeño */
  padding: 5px;           /* reduce padding */
  margin: 5px auto;
  background: #222;
  border: 3px outset #ff00ff; /* borde más delgado */
  text-align: center;
}

.frame {
  width: 100px;           /* marco más pequeño */
  height: 100px;
  position: relative;
  display: inline-block;
}

.center-img {
  width: 65px;            /* imagen más pequeña */
  height: 65px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-61%, -63%);
  z-index: 1;
}

.frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;           /* mismo tamaño que frame */
  height: 100px;
  background: url("IM/marco.png") no-repeat center center;
  background-size: contain;
  z-index: 2;
  pointer-events: none;
}

.caption {
  margin-top: 5px;
  font-weight: bold;
  font-size: 12px;
}


/* --- Espejado y tamaños --- */
.mirror-x {
  transform: scaleX(-1);
}

.small {
  width: 50px;   
  height: auto;   
  border: 4px ridge #ff00ff;
}

.medium {
  width: 100px;   
  height: auto;   
}

#exit {
  position: fixed;
  top: 20%;
  right: 5%;
  z-index: 1000;

  width: 100px;
  height: 100px;                 /* Definí altura */
  background: url("IM/exit1.png") center / cover no-repeat;
}

#exit:hover{
  background-image: url("IM/exit.gif");
  animation: vibrar 0.2s infinite;
}

/* Combiná translate + scale en la animación para no pisar transform */
@keyframes vibrar {
  0%   { transform: translate(0, 0) scale(1.03); }
  25%  { transform: translate(-2px,  2px) scale(1.03); }
  50%  { transform: translate( 2px, -2px) scale(1.03); }
  75%  { transform: translate(-2px, -2px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1.03); }
}