*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:

linear-gradient(
180deg,
#050510,
#0b0b18
);

font-family:

Arial,sans-serif;

color:white;

overflow-x:hidden;

}



body::before{

content:"";

position:fixed;

width:900px;

height:900px;

background:

radial-gradient(
circle,
rgba(
90,
50,
255,
.20
),
transparent
);

right:-300px;

top:-300px;

filter:

blur(
120px
);

z-index:-1;

}



/* NAV */

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:30px 8%;

position:sticky;

top:0;

z-index:999;

background:

rgba(
5,
5,
15,
.75
);

backdrop-filter:

blur(
20px
);

}

nav h2{

font-size:34px;

}

ul{

display:flex;

gap:40px;

list-style:none;

}

ul li{

cursor:pointer;

opacity:.8;

transition:.3s;

}

ul li:hover{

opacity:1;

color:#8B5CFF;

}



/* BUTTONS */

button{

padding:14px 30px;

border:none;

border-radius:12px;

background:#6f5cff;

color:white;

cursor:pointer;

transition:.3s;

font-weight:700;

}

button:hover{

transform:

translateY(-5px);

box-shadow:

0 0 30px rgba(
111,
92,
255,
.4
);

}

.secondary{

background:transparent;

border:

1px solid rgba(
255,
255,
255,
.2
);

}



/* HERO */

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:120px 8%;

min-height:90vh;

gap:80px;

}

.hero-left{

max-width:700px;

}

.hero h1{

font-size:90px;

line-height:1;

}

.hero p{

font-size:26px;

opacity:.8;

margin:

35px 0;

line-height:1.5;

}

.hero-right img{

width:650px;

border-radius:25px;

box-shadow:

0 0 80px rgba(
111,
92,
255,
.25
);

}

.buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}



/* STATS */

.stats{

display:flex;

gap:50px;

}

.stats h2{

font-size:40px;

color:#8B5CFF;

}



/* NEWS */

.news,
.events,
.community{

padding:140px 8%;

text-align:center;

}

.news-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.news-card{

padding:50px;

border-radius:20px;

background:

rgba(
255,
255,
255,
.04
);

transition:.3s;

}

.news-card:hover{

transform:

translateY(-10px);

}



/* EVENTS */

.event-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.event{

padding:50px;

border-radius:20px;

background:

rgba(
255,
255,
255,
.04
);

font-size:24px;

}



/* COMMUNITY */

.community button{

margin-top:40px;

}



/* FOOTER */

footer{

padding:120px;

text-align:center;

opacity:.8;

}



/* MOBILE */

@media(max-width:1000px){

.hero{

flex-direction:column;

text-align:center;

}

.hero h1{

font-size:65px;

}

.hero-right img{

width:100%;

}

.news-grid,
.event-grid{

grid-template-columns:1fr;

}

.stats{

justify-content:center;

}

ul{

display:none;

}

}

.social{

padding:140px 8%;

text-align:center;

}

.social-grid{

display:grid;

grid-template-columns:

1fr 1fr 1fr;

gap:30px;

margin-top:60px;

}

.members-card,
.activity-card,
.games-card{

padding:45px;

border-radius:25px;

background:

rgba(
255,
255,
255,
.04
);

}

.members-card h1{

font-size:70px;

color:#8B5CFF;

margin:25px 0;

}

.activity{

padding:20px;

margin-top:15px;

background:

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

border-radius:12px;

}

.games-card div{

padding:18px;

margin-top:15px;

border-radius:12px;

background:

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

}


@media(max-width:1000px){

.social-grid{

grid-template-columns:1fr;

}

}

.discord{

padding:140px 8%;

text-align:center;

}

.discord-panel{

display:grid;

grid-template-columns:

1.5fr 1fr;

gap:40px;

margin-top:60px;

padding:60px;

border-radius:30px;

background:

rgba(
255,
255,
255,
.04
);

}

.discord-left{

text-align:left;

}

.discord-left h1{

font-size:70px;

margin-bottom:20px;

color:#8B5CFF;

}

.discord-left p{

font-size:22px;

opacity:.8;

margin-bottom:40px;

}

.discord-right{

display:flex;

flex-direction:column;

gap:20px;

}

.discord-stat{

display:flex;

justify-content:space-between;

padding:25px;

border-radius:15px;

background:

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

}


@media(max-width:1000px){

.discord-panel{

grid-template-columns:1fr;

}

.discord-left{

text-align:center;

}

}

.featured-games{

padding:140px 8%;

text-align:center;

}

.game-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;

margin-top:60px;

}

.game-card{

padding:50px;

border-radius:25px;

background:

rgba(
255,
255,
255,
.04
);

transition:.3s;

}

.game-card h1{

font-size:70px;

margin-bottom:20px;

}

.game-card:hover{

transform:

translateY(-12px);

box-shadow:

0 0 40px rgba(
111,
92,
255,
.25
);

}


@media(max-width:1000px){

.game-grid{

grid-template-columns:1fr;

}

}

.members,
.leaderboard,
.achievements,
.login{

padding:140px 8%;

text-align:center;

}



/* MEMBERS */

.member-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.member-card{

padding:40px;

border-radius:25px;

background:

rgba(
255,
255,
255,
.04
);

}

.avatar{

width:90px;

height:90px;

border-radius:50%;

background:#6f5cff;

display:flex;

justify-content:center;

align-items:center;

font-size:40px;

margin:auto;

margin-bottom:25px;

}



/* LEADERBOARD */

.leaderboard-box{

margin-top:60px;

display:flex;

flex-direction:column;

gap:20px;

}

.leaderboard-box div{

padding:25px;

border-radius:15px;

background:

rgba(
255,
255,
255,
.04
);

}



/* ACHIEVEMENTS */

.achievement-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

margin-top:60px;

}

.achievement-grid div{

padding:40px;

border-radius:20px;

background:

rgba(
255,
255,
255,
.04
);

}



/* LOGIN */

.login-box{

display:flex;

flex-direction:column;

gap:20px;

max-width:600px;

margin:auto;

margin-top:50px;

}

.login input{

padding:20px;

border:none;

border-radius:12px;

background:

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

color:white;

}



/* MOBILE */

@media(max-width:1000px){

.member-grid,
.achievement-grid{

grid-template-columns:1fr;

}

}

.dashboard{

padding:120px 8%;

}

.profile-card{

text-align:center;

margin-bottom:80px;

}

.dashboard-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}

.dash-card{

padding:40px;

border-radius:20px;

background:

rgba(
255,
255,
255,
.04
);

text-align:center;

}

.recent{

margin-top:80px;

display:flex;

flex-direction:column;

gap:20px;

}

.recent div{

padding:25px;

border-radius:15px;

background:

rgba(
255,
255,
255,
.04
);

}


@media(max-width:1000px){

.dashboard-grid{

grid-template-columns:1fr;

}

}