*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,sans-serif;
background:#090b1a;
color:white;
}
header{
text-align:center;
padding:25px;
font-size:36px;
font-weight:bold;
background:linear-gradient(90deg,#00e5ff,#7b2cff);
box-shadow:0 0 25px #00e5ff;
}
.container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:40px;
}
.card{
background:#12152a;
border-radius:20px;
padding:20px;
text-align:center;
box-shadow:0 0 20px #00e5ff55;
transition:.3s;
text-decoration:none;
color:white;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 0 35px #00e5ff;
}
.card img{
width:120px;height:120px;border-radius:25px;
}
.game-name{
margin-top:12px;font-size:20px;font-weight:bold;
}
.detail{
max-width:1000px;
margin:40px auto;
padding:30px;
background:#12152a;
border-radius:20px;
box-shadow:0 0 25px #7b2cff;
}
.detail img.icon{
width:180px;border-radius:30px;
}
.screenshots{
display:flex;
gap:15px;
overflow:auto;
margin-top:25px;
}
.screenshots img{
width:300px;border-radius:15px;
}
.btn{
display:inline-block;
margin-top:30px;
padding:15px 30px;
background:linear-gradient(90deg,#00e5ff,#7b2cff);
color:white;
text-decoration:none;
font-weight:bold;
border-radius:35px;
box-shadow:0 0 20px #00e5ff;
}
@media(max-width:900px){
.container{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.container{grid-template-columns:1fr}
}