@font-face {
  font-family: "jjk";
  src: url("fuentes/JujutsuKaisen.ttf");
}

.container {
  max-width: 1200px;  /* La web no ocupará más de 1200px de ancho */
  margin-top: 10px;
  margin: auto;
  padding: 0 1em;     /* Rellena los lados para evitar que el contenido quede pegado a los bordes */
}

/* Reset básico para todos los elementos */
* {
  margin: 0; /* Elimina márgenes predeterminados */
  padding: 0; /* Elimina rellenos predeterminados */
  box-sizing: border-box; /* Incluye bordes y rellenos en el ancho total */
}

/* Estilo general del cuerpo */
body {
  /*font-family: Arial, sans-serif;*/
  line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
  background-color: #062450;
}

/* Encabezado */
header {
  border: 5px solid #007bff; /* Borde azul */
  padding: 1em; /* Espacio interno */
  text-align: center; /* Centra el texto horizontalmente */
}

h1{
  font-family:"jjk";
  color: white;
  font-size: 75px;
  
}

h3{
  color:#fefefe ;
  font-size: 15px;
  text-decoration: line-through;
}

h69{
  font-size: 25px;
  color: #C70039;
  }
  
h100{
font-size: 50px;
color: #FA8072 ;
text-decoration: wavy underline;
text-decoration-color: #FFA07A ;
}

.encabezado1{
  background-image: url("imagenes/tresdelamañana.jpg");
  background-size: cover;
  box-shadow: 0 0 6px #007bffcc, 0 0 12px rgba(0, 123, 255, 0.6), 0 0 24px rgba(0, 123, 255, 0.4);
}



/* Barra de navegación */
nav {
  background-color: #000000; /* Fondo verde claro */
  border: 4px solid #0b408f; /* Borde verde */
  padding: 1em; /* Espacio interno */
}


/* Lista principal de navegación */
nav ul {
  list-style: none; /* Elimina los puntos o números de la lista */
  display: flex; /* Coloca los elementos en fila */
  gap: 1em; /* Espacio uniforme entre los elementos */
}

/* Elementos individuales de la lista */
nav li {
  position: relative; /* Posiciona submenús respecto al elemento padre */
}

/* Submenú oculto inicialmente */
nav li ul {
  display: none; /* Oculta los submenús por defecto */
  position: absolute; /* Posiciona el submenú relativo al padre */
  top: 100%; /* Coloca el submenú justo debajo del padre */
  left: 0; /* Alinea el submenú al borde izquierdo del padre */
  background-color: #000000; /* Fondo verde claro */
  border: 1px solid #0b408f; /* Borde verde */
  padding: 0.5em 1em; /* Espacio interno */
}

/* Mostrar submenú al pasar el ratón */
nav li:hover ul {
  display: block; /* Hace visible el submenú */
}

/* Estilo para los enlaces del menú */
nav a {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: #ffffff; /* Color de texto verde oscuro */
}

/* Contenedor principal para la sección y la barra lateral */
.contenido-principal {
  display: flex; /* Coloca los elementos hijos en una fila */
  margin: 1em; /* Espacio externo alrededor del contenedor */
  gap: 1em; /* Espacio uniforme entre los elementos */
}

/* Bloque principal de contenido */
section {
  flex: 3; /* Ocupa 3 partes del espacio disponible */
  background-color: #fefefe; /* Fondo blanco */
  border: 4px solid #82b4ff; /* Borde gris claro */
  padding: 5em; /* Espacio interno */
}

/* Barra lateral */
aside {
  flex: 1; /* Ocupa 1 parte del espacio disponible */
  background-color: #d6e6ff; /* Fondo amarillo claro */
  border: 5px solid #82b4ff; /* Borde amarillo */
  padding: 1em; /* Espacio interno */
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.8), 0 0 12px rgba(0, 123, 255, 0.6), 0 0 24px rgba(0, 123, 255, 0.4);
}

/* Pie de página */
footer {
  background-color: #c2daff; /* Fondo rojo claro */
  border: 5px solid #1455b6; /* Borde rojo */
  text-align: center; /* Centra el texto */
  padding: 1em; /* Espacio interno */
  margin-top: 1em; /* Espacio externo en la parte superior */
}