*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}


body{
background:#080b18;
color:white;
}



header{

height:80px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 8%;

background:#101426;

}


.logo{

font-size:28px;
font-weight:bold;

}


.logo span{

color:#00eaff;

}


nav a{

color:white;
text-decoration:none;
margin-left:25px;

}



.hero{

height:500px;

display:flex;

align-items:center;

padding:0 8%;

background:

linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.8)
),

url("https://images.unsplash.com/photo-1542751371-adc38448a05e");

background-size:cover;

}



.hero-content{

max-width:600px;

}


.hero h1{

font-size:55px;
margin-bottom:20px;

}


.hero p{

font-size:20px;
line-height:1.6;

}


.btn{

display:inline-block;

margin-top:30px;

background:#00eaff;

color:#000;

padding:15px 35px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

}




section{

padding:70px 8%;

text-align:center;

}


h2{

font-size:35px;

margin-bottom:40px;

}



.game-container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}




.card{

background:#151a2e;

border-radius:15px;

overflow:hidden;

padding-bottom:25px;

transition:.3s;

}



.card:hover{

transform:translateY(-10px);

}



.card img{

width:100%;

height:160px;

object-fit:cover;

}



.card h3{

margin:20px 0 10px;

font-size:24px;

}



.card p{

padding:0 20px;

color:#bbb;

height:60px;

}



.card a{

display:inline-block;

margin-top:20px;

padding:12px 25px;

background:#00eaff;

color:#000;

border-radius:20px;

text-decoration:none;

font-weight:bold;

}





#about{

background:#101426;

}



footer{

padding:30px;

text-align:center;

background:#050711;

color:#888;

}




@media(max-width:700px){


.hero h1{

font-size:38px;

}


nav{

display:none;

}


}