/* CSS is /* --- Paleta de colores básica y fuente retro --- */
body {
  background-color: #f0f0f0; /* Un gris claro para el fondo */
  color: #333; /* Texto gris oscuro */
  font-family: monospace, sans-serif; /* Fuente retro */
  margin: 20px; /* Un poco de espacio alrededor del contenido */
}

/* --- Estilo para los títulos y párrafos --- */
h1, h2 {
  border-bottom: 1px dashed #666; /* Línea discontinua gris */
  padding-bottom: 5px; /* Espacio entre el título y la línea */
}

p {
  line-height: 1.5; /* Espaciado de línea para mejor lectura */
}

/* --- Enlaces con estilo clásico --- */
a {
  color: #0000EE; /* Azul clásico de enlace */
  text-decoration: none; /* Quita el subrayado por defecto */
}

a:hover {
  color: #EE0000; /* Rojo al pasar el ratón por encima */
  text-decoration: underline; /* Añade subrayado solo al interactuar */
}

/* --- Imágenes en blanco y negro (Efecto manga) --- */
img {
  max-width: 100%; /* Asegura que la imagen no se salga de la pantalla en móviles */
  height: auto;
  border: 1px solid #ccc; /* Añade un borde simple */
  padding: 5px;
  margin: 10px; /* Espacio entre imágenes */
  float: left; /* Para que el texto fluya alrededor */
}

/* Esta clase aplica el filtro solo a las imágenes que tú decidas en el HTML */
.retro {
  filter: grayscale(100%); /* Convierte la imagen a blanco y negro */
}