/* Scanlines (Screen-door effect) */
/* Todos los motivos verdes han sido cambiados a negros u oscuros */
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* Aquí solo el gradiente para las líneas horizontales negras.
     He ajustado la opacidad a 0.1 para que se noten un poco,
     pero puedes bajarla a 0.05 o incluso 0.03 si las quieres aún más sutiles. */
  background: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  
  /* Como solo hay un gradiente, el background-size solo necesita un valor. */
  background-size: 100% 2px; /* Un ancho del 100% y una altura de repetición de 2px */
  background-position: 0 0; /* Asegura que el patrón empiece desde la esquina */

  z-index: 10;
  pointer-events: none;
}
/* Add this to your crt.css or style.css */

/* Todos los motivos verdes han sido cambiados a negros u oscuros */
.crt-moving-scanline {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
                            rgba(0, 0, 0, 0.05),
                            rgba(0, 0, 0, 0.4),
                            rgba(0, 0, 0, 0.05));
    z-index: 9999;
    animation: scanline-sweep 8s linear infinite;
    pointer-events: none;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.1) inset,
                            0 0 10px rgba(0, 0, 0, 0.8);
}

@keyframes scanline-sweep {
  0% {
    top: -2px; /* Start just off the top edge */
  }
  100% {
    top: 100%; /* Move to the bottom edge and beyond */
  }
}



.responsive-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  display: block;
}

/* --- FUNDAMENTAL PARA EL CENTRADO --- */
html, body {
    height: 100%; /* Asegura que 'html' y 'body' ocupen toda la altura de la ventana */
    margin: 0;    /* Elimina los márgenes por defecto del body */
    padding: 0;   /* Elimina el padding por defecto del body */
    overflow: hidden; /* Opcional: Evita barras de desplazamiento si algo se desborda */
    /* Add this if you want a subtle border to mimic a screen bezel */
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.1) inset, /* Inner glow en negro */
                            0 0 10px rgba(0, 0, 0, 0.8); /* Outer dark border */
}

body.crt {
  display: flex;             /* Habilita Flexbox para el body */
  justify-content: center;   /* Centra horizontalmente el contenido dentro del body */
  align-items: center;       /* Centra verticalmente el contenido dentro del body */
  min-height: 100vh;         /* Asegura que el body ocupe al menos la altura completa del viewport (ventana visible) */

  /* Aquí irían tus otros estilos CRT, como el background, pseudo-elementos, etc.
     NO los quites, solo asegúrate de que las líneas de arriba estén presentes. */
}

/* --- (Opcional) Contenedor 'main' si lo usas --- */
/* Aunque no es estrictamente necesario para el centrado si la imagen es el único contenido directo del body,
   puede ser útil si planeas añadir más cosas en el futuro. */
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}