/* ===== BODY ===== */

body{
  background:#050505;
  color:#ccc;
  font-family:'Cormorant Garamond', serif;
  overflow-x:hidden;
  margin:0;
  padding:0;
}

/* ================= TOP BAR ================= */

.top-bar{
  position:relative;

  width:100%;
  height:90px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#000;

  border-bottom:1px solid rgba(255,255,255,0.08);

  padding:0 30px;

  box-sizing:border-box;
}

/* ================= LOGO ================= */

.logo{

  margin:0;

  color:#fff;

  font-family:'Inconsolata', monospace;

  font-size:42px;

  letter-spacing:8px;

  font-weight:300;

  text-transform:uppercase;

  text-shadow:
    0 0 10px rgba(90,0,0,0.5),
    0 0 25px rgba(90,0,0,0.2);

}

/* ================= CARRITO ================= */

.cart-button{
  position:absolute;

  right:30px;
  top:50%;

  transform:translateY(-50%);

  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#0d0d0d;

  border:1px solid rgba(255,255,255,0.08);

  border-radius:14px;

  color:#ccc;

  font-size:1.2rem;

  text-decoration:none;

  transition:0.3s;
}

.cart-button:hover{
  background:#170000;

  border-color:#5a0000;

  color:#fff;
}

/* ================= CONTADOR ================= */

#cart-count{
  position:absolute;

  top:-6px;
  right:-6px;

  width:20px;
  height:20px;

  border-radius:50%;

  background:#5a0000;

  color:#fff;

  font-size:0.65rem;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:'Inconsolata', monospace;
}

/* ===== LINKS ===== */

a{
  text-decoration:none;
  color:inherit;
}

a:visited{
  color:inherit;
}

/* ===== CATÁLOGO ===== */

.game-catalog{
  padding:60px 25px;
  max-width:1100px;
  margin:auto;
}

/* ===== TITULOS ===== */

.game-catalog h2{
  font-family:'Inconsolata', monospace;
  color:#555;
  letter-spacing:3px;
  margin:50px 0 20px;
  text-align:left;

  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:10px;
}

.game-catalog h2:first-child{
  margin-top:0;
}

/* ===== GRID ===== */

.game-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:15px;
}

/* ===== CARD ===== */

.game-item{
  cursor:pointer;
  text-align:center;
  transition:0.3s;

  display:block;
}

/* ===== IMAGEN ===== */

.game-item img{
  width:100%;
  height:220px;

  object-fit:cover;

  border:1px solid rgba(255,255,255,0.06);

  filter:brightness(0.55) contrast(1.1);

  transition:0.3s;
}

/* ===== TITULO ===== */

.game-item h3{
  margin-top:8px;

  font-size:0.7rem;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;

  color:#777;

  transition:0.3s;
}

/* ===== VISITADO ===== */

.game-item:visited h3,
.slide:visited h3{
  color:#5a0000;
}

/* ===== HOVER ===== */

.game-item:hover img{
  filter:brightness(0.9);

  border-color:#5a0000;

  transform:scale(1.03);
}

.game-item:hover h3{
  color:#ccc;
  letter-spacing:3px;
}

/* ===== RESPONSIVE ===== */

@media (max-width:900px){

  .game-grid{
    grid-template-columns:repeat(3, 1fr);
  }

}

@media (max-width:600px){

  .game-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .logo{
    font-size:28px;
    letter-spacing:4px;
  }

  .top-bar{
    height:80px;
    padding:0 15px;
  }

  .cart-button{
    width:45px;
    height:45px;

    right:15px;
  }

}

/* ===== CARRUSEL ===== */

.carousel{
  width:100%;
  overflow:hidden;

  margin-bottom:60px;

  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* ===== TRACK ===== */

.carousel-track{
  display:flex;
  gap:20px;

  width:max-content;

  animation:scroll 30s linear infinite;
}

/* ===== PAUSA ===== */

.carousel:hover .carousel-track{
  animation-play-state:paused;
}

/* ===== SLIDE ===== */

.slide{
  position:relative;

  min-width:480px;
  height:260px;

  cursor:pointer;

  flex-shrink:0;

  overflow:hidden;

  display:block;
}

/* ===== IMAGEN ===== */

.slide img{
  width:100%;
  height:100%;

  object-fit:cover;

  filter:brightness(0.6);

  transition:0.3s;
}

/* ===== INFO ===== */

.slide-info{
  position:absolute;

  bottom:20px;
  left:20px;

  color:#ccc;

  font-family:'Inconsolata', monospace;
}

.slide-info h3{
  font-size:1.3rem;
  letter-spacing:2px;
  color:#ccc;
}

.slide-info p{
  font-size:0.7rem;
  color:#888;
  margin-top:5px;
}

/* ===== HOVER ===== */

.slide:hover img{
  filter:brightness(0.9);
  transform:scale(1.03);
}

/* ===== ANIMACIÓN ===== */

@keyframes scroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}