/* 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, tamaño de este y margenes en auto.*/
.main-content {
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
}

/*imagen de fondo, tamaño de esta,  un size cover para que la imagen quede bien en el fondo
y no se pase de los limites. centrar la imagen, bordes y margenes de esta. */
/*alineacion del texto con display flex, padding excesivo (no sabia como bajarlo mas), 
un borde solido y una animacion de pulso para la sombra*/

.hero {
  background-image: url('../Imgs/FondoPizza.png');
  height: 500px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  margin-bottom: 40px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 280px;
  border: 2px solid #800080;
  animation: pulseShadow 2s infinite;
}

/*color, sombra retro y tamaño.*/
.titulo {
  color: #07033b;
  text-shadow: 0 0 20px #ff00ff;
  font-size: 30px;
}

/*color y separación del slogan debajo del titulo */
.slogan {
  color: #ff5500;
  margin-top: 20px;
  font-size: 18px;
}

/*display grid para ubicar las cajas arcade en 3 columnas,
separación entre ellas y centrado de contenido */
.menu-Arcades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 20px;
  justify-items: center;
}

/*color de fondo, borde, sombra,
padding interno, redondeo de esquinas, tamaño fijo,
alineación del texto y animación */
.arcade-box {
  background-color: #111;
  border: 2px solid #800080;
  box-shadow: 0 0 15px #800080;
  padding: 20px;
  border-radius: 10px;
  width: 280px;
  text-align: center;
  animation: pulseShadow 2s infinite;
}

/*tamaño al 100%,
bordes redondeados, margen inferior y sombra cian */
.arcade-box img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 0 10px cyan;
}

/*color, tamaño y margen */
.arcade-box h3 {
  color: #ffcc00;
  font-size: 14px;
  margin: 10px 0;
}

/*lo mismo */
.arcade-box p {
  color: #ad2edf;
  font-size: 12px;
  margin: 10px 0;
}

/*fondo negro, texto cian, centrado,
padding, tamaño chico, borde superior y sombra retro */
.footer {
  background-color: #000000;
  color: #00ffff;
  text-align: center;
  padding: 20px 0;
  font-size: 10px;
  border-top: 2px solid #ff00ff;
  box-shadow: 0 -2px 10px #ff00ff;
}

/*animación retro que hace un pulso de sombra muy piola*/
@keyframes pulseShadow {
  0% { box-shadow: 0 0 10px #800080; }
  50% { box-shadow: 0 0 30px #ff00ff; }
  100% { box-shadow: 0 0 10px #800080; }
}