body{
  margin:0;
  font-family:Arial;
  background:#0a0a0a;
  color:white;
  text-align:center;
}

/* NAVBAR */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px;
  background:#111;
  box-shadow:0 0 10px red;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo img{
  width:40px;
}

nav input{
  padding:6px;
  border-radius:5px;
  border:none;
}

nav button{
  background:red;
  color:white;
  border:none;
  padding:8px 15px;
  cursor:pointer;
  border-radius:5px;
}

/* HERO */
.hero{
  padding:80px;
  background:linear-gradient(black, #111);
  animation: fadeIn 2s;
}

.hero h1{
  color:red;
  font-size:40px;
}

/* CATEGORY BUTTONS */
.categories{
  margin:20px;
}

.categories button{
  margin:5px;
  padding:10px 15px;
  background:#222;
  color:white;
  border:none;
  cursor:pointer;
  border-radius:5px;
}

.categories button:hover{
  background:red;
}

/* GAME GRID */
.game-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:25px;
  padding:30px;
}

.game-card{
  width:220px;
  background:#111;
  border-radius:12px;
  overflow:hidden;
  transition:.3s;
  box-shadow:0 0 8px black;
}

.game-card:hover{
  transform:scale(1.07);
  box-shadow:0 0 15px red;
}

.game-card img{
  width:100%;
}

/* ANIMATION */
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}