/* 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." */

body {
  background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
  background-color: #1e1e1e;
  color: #f2f2f2;
  font-family: 'Press Start 2P', monospace;
  margin: 0;
  padding: 0;
}

header, footer {
  text-align: center;
  padding: 1.5em;
  background-color: #111;
  border-bottom: 2px dashed #666;
}

h1 {
  margin: 0.5em 0;
}

h2 {
  margin: 0.5em 0;
}
.emoji {
  font-size: 1.5em;
  margin-right: 8px;
}
nav {
  background-color: #222;
  text-align: center;
  padding: 1em;
  border-bottom: 1px solid #444;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2em;
  flex-wrap: wrap;
}

nav a {
  color: #ff66cc;
  text-decoration: none;
  font-weight: bold;
}

.seccion {
  padding: 2em;
  max-width: 1000px;
  margin: auto;
}

/* Glitch effect */
.glitch {
  color: white;
  position: relative;
  font-size: 2em;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
}
.glitch::before {
  animation: glitchTop 1s infinite linear alternate-reverse;
  color: #ff00c1;
}
.glitch::after {
  animation: glitchBottom 1s infinite linear alternate-reverse;
  color: #00fff9;
}

@keyframes glitchTop {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-2px, 2px); }
}
@keyframes glitchBottom {
  0% { transform: translate(0, 0); }
  100% { transform: translate(2px, -2px); }
}

/* Neon effect */
.neon-text {
  color: #ff66cc;
  text-shadow: 0 0 5px #ff66cc, 0 0 10px #ff66cc, 0 0 20px #ff66cc, 0 0 40px #ff33aa;
}

/* YouTube grid */
.youtube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1em;
  margin-top: 1em;
}

.video-card {
  background-color: #1b1b1b;
  border: 2px solid #ff99cc;
  border-radius: 10px;
  overflow: hidden;
  padding: 0.5em;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card iframe {
  width: 100%;
  height: 160px;
  border-radius: 6px;
}

.video-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 10px #ff66aa;
}

.video-card p {
  color: #ffccff;
  font-size: 0.9em;
  margin-top: 0.5em;
}

/* Galeria scroll */
.galeria-scroll {
  overflow: hidden;
  border: 2px dashed #ff99cc;
  background-color: #121212;
  margin-top: 1em;
}

.contenedor-imagenes {
  display: flex;
  gap: 12px;
  animation: moverGaleria 30s linear infinite;
}

.contenedor-imagenes img {
  height: 160px;
  border: 2px solid #ff66aa;
  border-radius: 6px;
  transition: all 0.4s;
  filter: grayscale(100%);
}

.contenedor-imagenes img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

@keyframes moverGaleria {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

footer {
  background-color: #111;
  border-top: 2px dashed #444;
  font-size: 0.8em;
  color: #999;
}

ul {
  list-style-type: square;
  padding-left: 2em;
  line-height: 1.6em;
}