*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;

}

body{

background:
linear-gradient(
180deg,
#000,
#050505,
#101010
);

color:white;

padding:20px;

overflow-x:hidden;

}

.container{

max-width:1400px;
margin:auto;

}

.title{

text-align:center;

font-size:35px;

margin-bottom:40px;

letter-spacing:3px;

animation:
glow 2s infinite;

}


.games{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:15px;

}


.gameCard{

background:
rgba(255,255,255,.05);

border:
1px solid rgba(
255,255,255,.08);

backdrop-filter:
blur(10px);

border-radius:25px;

padding:15px;

transition:.6s;

animation:
float 3s infinite;

}


.gameCard:hover{

transform:
translateY(-10px)
scale(1.05);

box-shadow:

0 0 35px
rgba(255,255,255,.2);

}


.gameCard h2{

font-size:18px;

margin-bottom:10px;

}

.gameCard p{

font-size:12px;

opacity:.7;

margin-bottom:20px;

}


/* POWER */

.powerBox{

display:flex;

justify-content:center;

}

.power{

width:90px;
height:90px;

border-radius:50%;

display:flex;

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

position:relative;

font-size:18px;

font-weight:bold;

background:
conic-gradient(
white 0deg,
#222 0deg
);

animation:
pulse 1.5s infinite;

}


.power span{

z-index:2;

}


.power::before{

content:"";

position:absolute;

width:72px;
height:72px;

border-radius:50%;

background:#111;

}


/* Home */

.homeBtn{

position:fixed;

left:20px;
top:20px;

width:50px;
height:50px;

display:flex;

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

border-radius:50%;

background:
rgba(255,255,255,.1);

backdrop-filter:
blur(10px);

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

color:white;

text-decoration:none;

font-size:24px;

z-index:999;

transition:.5s;

}


.homeBtn:hover{

transform:scale(1.1);

box-shadow:
0 0 20px
rgba(255,255,255,.3);

}



/* animation */

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:
0 0 10px white;

}

50%{

transform:scale(1.15);

box-shadow:
0 0 30px white;

}

100%{

transform:scale(1);

box-shadow:
0 0 10px white;

}

}

@keyframes glow{

50%{

text-shadow:
0 0 20px white;

}

}

@keyframes float{

50%{

transform:
translateY(-8px);

}

}



/* mobile */

@media(max-width:768px){

.games{

grid-template-columns:
repeat(2,1fr);

gap:10px;

}

.title{

font-size:24px;

}

.gameCard{

padding:10px;

}

.power{

width:70px;
height:70px;

font-size:13px;

}

.power::before{

width:55px;
height:55px;

}

}