/* 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." */
:root {
  --bg: black;
  --text: white;
  --accent-1: #8B0000;
  --accent-2: #4f1b75;
}

.banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  width: 90%;           /* igual que la caja negra (overlay) */
  margin: 0 auto;       /* centrado */
  z-index: 2;
}

.banner-img {
  max-width: 500px;
  height: auto;
  border-bottom: 3px groove white;
}

.banner-gif {
  width: 100px;
  height: auto;
}

.banner-gif.left {
  order: -1;
}

.banner-gif.right {
  order: 1;
}



body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Arial;
  background-image: url("https://i.ibb.co/F4h9tz88/image.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* 🌑 Caja negra de fondo */
.overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0; /* 👈 antes estaba en 1, bájalo a 0 para que quede DETRÁS */
  border: 4px groove white;
  border-radius: 15px;
}


/* 🩶 Título principal centrado */
.intro {
  position: relative;      /* se mantiene en el flujo, pero permite controlar capas */
  z-index: 2;              /* por encima de la caja negra */
  text-align: center;      /* 💥 centra el contenido horizontalmente */
  color: white;            /* texto blanco */
  padding: 40px 20px;      /* espacio dentro (arriba/abajo y lados) */
  width: 100%;             /* ocupa todo el ancho disponible */
  margin: 0 auto;          /* se asegura de quedar centrado en la página */
}

.intro h1 {
  font-family: "UnifrakturCook", cursive; /* fuente emo tipo SpaceHey */
  font-size: 65px;         /* tamaño grande */
  font-weight: 400;        /* no tan grueso */
  letter-spacing: 1px;     /* un poco de espacio entre letras */
  margin: 0 auto;          /* centra el bloque del texto */
  display: inline-block;   /* permite que margin auto lo centre mejor */
  text-align: center;      /* 💥 centra el texto dentro del propio h1 */
}

/* 💬 Presentación debajo del título */
.presentation {
  position: relative;        /* mantiene su lugar normal */
  z-index: 2;                /* sigue encima de la caja negra */
  color: white;              /* texto blanco */
  text-align: center;        /* centra todo el texto horizontalmente */
  font-family: Arial, sans-serif; /* fuente clara para leer bien */
  font-size: 18px;           /* tamaño cómodo */
  line-height: 1.6;          /* espacio entre líneas */
  max-width: 700px;          /* evita que ocupe todo el ancho */
  margin: 0 auto;            /* centra la caja horizontalmente */
  padding: 10px 20px;        /* espacio interno para que no toque los bordes */
}

.presentation p {
  text-align: center;  /* centra el texto */
  margin: 0 auto;      /* centra la caja en la página */
  max-width: 700px;    /* ancho máximo para que no se desborde */
}

.intro,
.presentation {
  position: relative; /* mantiene su lugar pero permite usar z-index */
  z-index: 2;         /* más alto que la caja negra */
}

/* 🩶 Arreglo de capas y centrado */
body {
  margin: 0;
  padding: 0;
  position: relative;
}

/* la caja negra de fondo */
.overlay{
  position: absolute;
  top: 0px;
  bottom: 0;                         /* se estira hasta el final de la página */
  left: 50%;                         /* céntralo por el medio */
  transform: translateX(-50%);       /* corrección de centrado */
  width: 80%;                        /* ancho (equivalente a 5% + 5% márgenes) */
  max-width: 1100px;                 /* opcional, para que no sea gigante en pantallas enormes */
  background: rgba(0,0,0,.55);
  border: 4px groove #fff;
  border-radius: 15px;
  box-sizing: border-box;            /* el borde cuenta dentro del ancho (evita “desplazar”) */
  z-index: 0;                        /* detrás del contenido */
}



/* todo el contenido encima */
.banner,
.intro,
.presentation {
  position: relative;
  z-index: 2; /* 👈 por encima de la caja negra */
}

/* presentación centrada */
.presentation {
  color: white;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* ❤️ Caja roja con borde blanco */
.links-box {
  background-color: var(--accent-1); /* tu rojo oscuro */
  border: 3px solid white;          /* borde blanco */
  border-radius: 10px;              /* esquinas redondeadas */
  width: 250px;                     /* ancho fijo */
  padding: 15px;                    /* espacio interior */
 margin: 40px auto 60px; /* la vuelve a centrar */
transform: translateX(-150px); /* la empuja 150px hacia la izquierda */
  color: white;                     /* texto blanco */
  text-align: left;                 /* texto alineado a la izquierda */
  font-family: Arial, sans-serif;
  z-index: 2;                       /* por encima de la caja negra */
  position: relative;
}

/* título de la caja */
.links-box h2 {
  font-family: "UnifrakturCook", cursive;
  font-size: 30px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 2px solid white;  /* línea blanca decorativa */
  padding-bottom: 5px;
}

/* lista de links */
.links-box ul {
  list-style: none;  /* quita los puntitos de la lista */
  padding: 0;
  margin: 0;
}

/* cada link */
.links-box a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  display: block;             /* cada link ocupa una línea entera */
  padding: 8px 10px;
  border-radius: 5px;
  transition: 0.3s;           /* suaviza el hover */
}

/* efecto al pasar el ratón */
.links-box a:hover {
  background-color: var(--accent-2); /* tu morado oscuro */
} 

/* 🌈 Fila de blinkies centrada */
.blinkies {
  display: flex;                /* los pone en fila */
  flex-wrap: wrap;              /* si no caben, saltan de línea */
  justify-content: center;      /* centrados horizontalmente */
  align-items: center;          /* alineados verticalmente */
  gap: 8px;                     /* espacio entre ellos */
  margin: 20px 0 40px;          /* espacio arriba y abajo */
  position: relative;
  z-index: 2;                   /* por encima de la caja negra */
}

.blinkies img {
  height: 40px;                 /* tamaño estándar de blinkies */
  border-radius: 4px;           /* esquinas suaves */
  transition: transform 0.2s;   /* animación al pasar el ratón */
}

.blinkies img:hover {
  transform: scale(1.1) rotate(-3deg); /* mini zoom + inclinación divertida */
}

/* 🖱️ Cursor personalizado */
* {
  cursor: url("https://cur.cursors-4u.net/holidays/hol-4/hol335.cur"), auto !important;
}

/* 💿 Banner con gifs a los lados */
.banner {
  position: relative;
  display: flex;               /* permite colocar en fila */
  justify-content: center;     /* centra el banner principal */
  align-items: center;
  gap: 10px;                   /* espacio entre los gifs y el banner */
  padding: 0;
  z-index: 2;
}

.banner-img {
  max-width: 500px;            /* ajusta el tamaño del banner principal */
  height: auto;
  display: block;
  border-bottom: 3px groove white;
}

/* gifs de los lados */
.banner-gif {
  width: 100px;                /* tamaño de los gifs */
  height: auto;
}

/* posición de cada uno */
.banner-gif.left {
  order: -1;                   /* va antes del banner */
}

.banner-gif.right {
  order: 1;                    /* va después del banner */
}