/* General */
body {
  font-family: 'Creepster', cursive; /* Fuente decorativa */
  margin: 0;
  padding: 0;
  background-color: #000; /* Fondo negro */
  color: #eaeaea; /* Texto claro */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* Asegura que el contenido ocupe al menos el alto de la ventana */

  overflow: auto;
}

.container {
  max-width: 800px;
  width: 90%;
  background: linear-gradient(145deg, #1a0000, #000);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(255, 0, 0, 0.6);
  text-align: center;
  border: 2px solid #660000;
 
  overflow: hidden; /* Evita que el contenido adicional desborde */
}



/* Header con íconos */
.terror-header h1 {
  font-size: 2.8rem;
  color: #ff0000; /* Rojo sangre */
  text-shadow: 0 0 10px #ff0000, 0 0 20px #b30000;
}

.instructions {
  font-size: 1.2rem;
  margin-top: 10px;
  color: #cccccc;
  line-height: 1.5;
  font-style: italic;
  text-shadow: 0 0 5px #000;
}

/* Formulario con íconos */
form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: #eaeaea;
}

input, button {
  font-size: 1rem;
  padding: 10px;
  border: none;
  border-radius: 6px;
}

input {
  font-size: 1rem;
  padding: 12px;
  border: 2px solid #660000;
  border-radius: 8px; /* Bordes redondeados */
  background-color: #1a0000;
  color: #fff;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
  border-color: #cc0000;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
}

input::placeholder {
  color: #990000;
}

button {
  
  align-items: center;
  gap: 10px; /* Espacio entre ícono y texto */
  font-size: 1rem;
  padding: 12px 20px;
  background-color: #cc0000;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

button:hover {
  background-color: #ff1a1a;
  transform: scale(1.05);
}


/* Respuesta */
#response-area {
  margin-top: 20px;
  font-size: 1.5rem;
  color: #ff6666; /* Respuesta con tono sangriento */
  text-shadow: 0 0 10px #ff6666, 0 0 15px #ff0000;
}

/* Responsive */
@media (max-width: 600px) {
  .container {
    max-width: 95%;
  }

  .terror-header h1 {
    font-size: 2rem;
  }

  .instructions {
    font-size: 1rem;
  }

  label {
    font-size: 0.9rem;
  }

  input, button {
    font-size: 0.9rem;
  }

  #response-area {
    font-size: 1.2rem;
  }
}


/* Espacios para anuncios */
.ad-space {
  margin: 20px 0;
  text-align: center;
}

.ad-top {
  margin-bottom: 10px;
}

.ad-middle {
  margin-top: 20px;
  margin-bottom: 20px;
}

.ad-bottom {
  margin-top: 30px;
}


/* Nuevo estilo para el menú */
.navigation {
  display: flex;
  justify-content: space-around; /* Distribuir elementos uniformemente */
  align-items: center;
  list-style: none;
  background: linear-gradient(90deg, #4b134f, #c94b4b); /* Fondo degradado atractivo */
  padding: 15px 20px; /* Espaciado interno */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombra */
  border-radius: 8px; /* Bordes redondeados */
  position: sticky;
  top: 0;
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

/* Estilo para los enlaces */
.navigation a {
  text-decoration: none; /* Eliminar subrayado */
  color: #fff; /* Texto blanco */
  font-size: 1.1rem; /* Tamaño de fuente */
  padding: 10px 15px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  transition: all 0.3s ease-in-out; /* Efecto suave */
}

/* Efecto al pasar el ratón por los enlaces */
.navigation a:hover {
  background: rgba(255, 255, 255, 0.2); /* Fondo transparente */
  transform: scale(1.1); /* Aumentar ligeramente el tamaño */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .navigation {
    flex-direction: column; /* Cambiar a disposición vertical */
    padding: 10px;
    gap: 10px; /* Separar elementos verticalmente */
  }

  .navigation a {
    width: 100%; /* Enlaces ocupan toda la fila */
    text-align: center; /* Texto centrado */
  }
}



.content {
  max-width: 800px; /* Limitar el ancho para una mejor lectura */
  margin: 20px auto; /* Centrar el contenido horizontalmente */
  padding: 20px; /* Espaciado interno */
  background: linear-gradient(135deg, #1e1e1e, #333); /* Fondo con degradado oscuro */
  color: #f5f5f5; /* Texto en color claro */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra sutil */
  line-height: 1.6; /* Altura de línea para mejor legibilidad */
  font-size: 1rem; /* Tamaño de texto cómodo para leer */
  font-family: 'Arial', sans-serif; /* Fuente simple y profesional */
}

/* Estilo para encabezados dentro de .content */
.content h2 {
  font-size: 1.8rem; /* Tamaño más grande para destacar encabezados */
  color: #ffcc00; /* Color llamativo para los encabezados */
  margin-bottom: 15px; /* Espaciado inferior */
  text-align: center; /* Centrar texto */
}

/* Estilo para párrafos dentro de .content */
.content p {
  margin-bottom: 20px; /* Espaciado inferior entre párrafos */
  text-align: justify; /* Alinear texto para una mejor legibilidad */
}

/* Efecto en enlaces dentro de .content */
.content a {
  color: #00ffcc; /* Color distintivo para enlaces */
  text-decoration: none; /* Sin subrayado */
  transition: color 0.3s; /* Transición suave al pasar el ratón */
}

.content a:hover {
  color: #ff9900; /* Cambiar a un color cálido al pasar el ratón */
}

.comment {
  font-size: 0.9rem;
  color: #999; /* Color gris claro */
  font-style: italic; /* Estilo de comentario */
  margin-top: -10px; /* Reduce el espacio superior */
  margin-bottom: 15px; /* Espacio inferior */
}