/* Estilo general para el cuerpo y la fuente */
body {
    font-family: Arial, sans-serif;
    background-image: url("https://schedule1guia.neocities.org/img/fondo.png");
    background-repeat: repeat; /* Se repite en mosaico */
    margin: 0;
    padding: 20px;
}

/* Contenedor principal */
.container {
    max-width: 930px; /* Ancho máximo del contenido para centrarlo */
    margin: auto; /* Centra el contenedor en la página */
    background-color: #000000;
    padding: 20px;
    border-radius: 8px;
}

.infof {
    font-size: 14px;
    color: #D00000;      /* Ajusta el color si quieres */
    text-align: center;  /* Centra el texto */
    margin-top: -10px;   /* Ajusta la distancia hacia arriba */
    margin-bottom: 20px; /* Espacio hacia abajo */
}

.titulo {
    font-size: 50px;
    color: #D00000;      /* Ajusta el color si quieres */
    text-align: center;  /* Centra el texto */
    margin-top: -10px;   /* Ajusta la distancia hacia arriba */
    margin-bottom: 20px; /* Espacio hacia abajo */
}

.leyenda {
    font-size: 40px;
    color: #D00000;      /* Ajusta el color si quieres */
    text-align: center;  /* Centra el texto */
    margin-top: -10px;   /* Ajusta la distancia hacia arriba */
    margin-bottom: 20px; /* Espacio hacia abajo */
}

.barrio {
   font-size: 40px;
    color: #D00000;      /* Ajusta el color si quieres */
    text-align: center;  /* Centra el texto */
    margin-top: -10px;   /* Ajusta la distancia hacia arriba */
    margin-bottom: 20px; /* Espacio hacia abajo */
}

.nombreNPC {
   font-size: 30px;
    color: #D00000;      /* Ajusta el color si quieres */
    text-align: center;  /* Centra el texto */
    margin-top: -10px;   /* Ajusta la distancia hacia arriba */
    margin-bottom: 20px; /* Espacio hacia abajo */
}

/* Estilo para el perfil */
.profile {
    text-align: center;
    margin-bottom: 20px;
}

.profile img {
    height: 522px;
    width: 800px;
}

.globo {
    max-width: 50px; /* Tamaño máximo para la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-right: 10px; /* Añade espacio a la derecha si es necesario */
    display: inline-block; /* Asegura que la imagen no ocupe todo el ancho */
    vertical-align: middle; /* Alinea verticalmente si está junto con texto */
}


p {
    color: #ffffff;
    margin: 10px 0;
    font-size: 16px;
}

.npc-container{
    display: flex;
    align-items: center; /* alinea verticalmente */
    gap: 20px; /* espacio entre imágenes */
}

.npc{
    width: 200px; /* ajusta si quieres */
}

.npc-right{
    height: 422px;
    width: 710px; /* ajusta */
}

.separador {
  display: block;
  width: 850px;
  height: 200px;
}

.reproductor {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 15px;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px #00b300;
  border: 2px solid #00ff00;
  max-width: 400px;

}