/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ESTILOS GENERALES DE LA PÁGINA */
html {
  background-color: #61704B; /* Obliga a que toda la pantalla sea verde base */
}

body {
  background-color: #61704B; /* Tu verde base */
  color: #e1e1e6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 0; 
  margin: 0;
}

/* El cursor personalizado aplicado a toda la página */
html, body {
  cursor: url('plumafuente.png'), auto;
}

/* Cambiar el cursor cuando pasas por encima de un enlace */
a:hover {
  cursor: url('zelda-espada.png'), pointer;
}

/* Contenedor principal para centrar el contenido del cuerpo */
.contenido-principal {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* CABECERA (HEADER): Madera vieja y oscura */
.header-posada {
  background-color: #3b452e; /* Verde bosque muy oscuro */
  border-bottom: 2px solid #e1e1e6;
  padding: 30px 20px;
  text-align: center;
}

.header-posada h1 {
  margin: 0 0 15px 0;
  font-family: 'Georgia', serif; 
  font-size: 2.5rem;
  color: #e1e1e6;
  letter-spacing: 1px;
}

/* Menú de navegación dentro de la cabecera */
.nav-posada a {
  color: #e1e1e6;
  text-decoration: none;
  font-weight: bold;
  margin: 0 15px;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

/* MODIFICADO: Color verde claro dorado al pasar por encima de los enlaces */
.nav-posada a:hover {
  color: #c2d1b2; /* Un verde claro suave que resalta en la oscuridad */
  text-decoration: underline;
}

/* El diseño del contenedor de tu música */
.mi-reproductor {
  background-color: #4d593b;
  padding: 15px;
  border-radius: 8px;
  margin-top: 40px;
  border: 1px solid #e1e1e6;
}

.mi-reproductor h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-style: italic;
}



/* Estado normal cuando se hace clic (mientras mantienes pulsado) */
html:active, body:active, a:active {
  cursor: url('zelda-espada-arriba.png'), pointer;
}

/* Clase que aplicará JavaScript para mantener la animación unos segundos */
.clic-espada, .clic-espada a, .clic-espada html {
  cursor: url('zelda-espada-arriba.png'), pointer !important;
}