/*Son margenes basicos*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*el font family es para la fuente de las letras, la cual esta sacada de google con un link
en el html.  el background es para el fondo negro con degrade en gris marron.
el color es para la fuente de las letras. luego una alineacion de texto y un cursor 
personalizado*/
body {
  font-family: 'Press Start 2P', cursive;
  background: linear-gradient(135deg, #000000, #1b062c);
  
  text-align: center;
  cursor: url('Imgs/cursor32.png') 0 0, auto ;
}

/*display flex y justify content para mantener distancia
entre los elementos, y gap para la distancia minima de estos*/
.navbar .nav-list {
  display: flex;
  justify-content: center;
  gap: 40px;
}

/*sacar el puntito de lista.*/
.nav-list li {
  list-style: none;
}

/*color de texto del nav, sacar los reenglones y una transicion de color en el hover*/
.nav-list li a {
  color: #ffff00;
  text-decoration: none;
  transition: 0.5s;
}

/*cambio de color y sombra de color linda en la transicion (hover)*/
.navbar .nav-list li a:hover {
  color: cyan;
  text-shadow: 0 0 10px #00ffff;
}

/* color del heather, espacio para este y una sombra retro */
.header {
  background-color: #ff00ff;
  padding: 20px 0;
  box-shadow: 0 0 20px #ff00ff;
}

/* distancia del main con el heather y nav */
.main-content {
  padding: 40px 20px;
}

/*tamaño de la imagen, posicion de esta, color solido y con sombra junto
a una animacion de pulso definida en animaciones*/
.hero-img {
  max-width: 500px;
  margin-top: 40px;
  border: 4px solid #00ffff;
  box-shadow: 0 0 15px #00ffff;
  animation: pulse 2s infinite;
}

/*tamaño de las letras, color y animacion de desaparicion de esta*/
.title-flicker {
  font-size: 34px;
  color: #ffff00;
  animation: flicker 2s infinite alternate;
}

/*color del slogan, margen superior y tamaño*/
.slogan {
  color: #ff5500;
  margin-top: 10px;
  font-size: 24px;
}

/*color del texto, margen superior, tamaño, sombra to hermosa y
animacion de sombra neon (definido en animacion) mas lenta*/
.glow-text {
  color: #ffffff;
  margin-top: 40px;
  font-size: 14px;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
  animation: neon 2s ease-in-out infinite alternate;
}

/* fondo oscuro sin degrade, color de fuente, padding, tamaño de fuente
borde superior y borde shadow general*/
.footer {
  background-color: #000000;
  color: #00ffff;
  padding: 20px 0;
  font-size: 10px;
  border-top: 2px solid #ff00ff;
  box-shadow: 0 -2px 10px #ff00ff;
}

/* Desaparecer y aparecer el titulo con un parpadeo (Flicker) */
@keyframes flicker {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/*la sombra neon usada en el glow text, esto agranda y achica su tamaño*/
@keyframes neon {
  from {
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
  }
  to {
    text-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff;
  }
}

/*la animacion de pulso de la imagen*/
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 10px #00ffff; }
  50% { transform: scale(1.05); box-shadow: 0 0 20px #00ffff; }
  100% { transform: scale(1); box-shadow: 0 0 10px #00ffff; }
}