/* =======================================================
        VORTEXMC NETWORK WEBSITE
        STYLE.CSS PART 1
======================================================= */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800;900&display=swap');


*{

margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;

}



body{

font-family:'Poppins',sans-serif;

background:#05000d;

color:white;

overflow-x:hidden;

}



:root{

--purple:#8f00ff;

--purple2:#c13dff;

--dark:#05000d;

--glass:rgba(255,255,255,.07);

}



body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at 20% 20%,#8f00ff45,transparent 35%),

radial-gradient(circle at 80% 80%,#c13dff35,transparent 40%);

z-index:-1;

}





/* SCROLLBAR */


::-webkit-scrollbar{

width:12px;

}


::-webkit-scrollbar-track{

background:#090014;

}


::-webkit-scrollbar-thumb{

background:

linear-gradient(

#8f00ff,

#c13dff

);

border-radius:20px;

}




/* CONTAINER */


.container{

width:90%;

max-width:1400px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}




/* HEADER */


header{

position:fixed;

top:0;

left:0;

width:100%;

padding:20px 0;

background:

rgba(5,0,13,.75);

backdrop-filter:blur(20px);

border-bottom:

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

z-index:999;

}



.logo{

display:flex;

align-items:center;

gap:15px;

}



.logo img{

width:65px;

filter:

drop-shadow(0 0 20px #8f00ff);

}



.logo h2{

font-size:32px;

font-weight:900;

}



.logo span{

color:#c13dff;

}




nav{

display:flex;

gap:30px;

}



nav a{

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}



nav a:hover{

color:#c13dff;

text-shadow:

0 0 15px #8f00ff;

}




/* HERO */


.hero{

height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

}



.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:

radial-gradient(circle,#8f00ff55,transparent 70%);

right:-200px;

top:100px;

filter:blur(50px);

}




.hero-content{

width:90%;

max-width:1400px;

margin:auto;

position:relative;

z-index:2;

}




.hero h3{

font-size:22px;

letter-spacing:5px;

color:#c13dff;

}



.hero h1{

font-size:100px;

font-weight:900;

text-shadow:

0 0 30px #8f00ff;

margin:20px 0;

}



.hero p{

font-size:20px;

max-width:650px;

line-height:35px;

color:#ddd;

}
/* =======================================================
              STYLE.CSS PART 2
======================================================= */


/* HERO BUTTONS */


.buttons{

display:flex;

gap:20px;

margin-top:40px;

}



.buttons a{

padding:18px 45px;

border-radius:15px;

text-decoration:none;

color:white;

font-weight:800;

background:

linear-gradient(

45deg,

#8f00ff,

#c13dff

);

box-shadow:

0 0 30px #8f00ff55;

transition:.4s;

}



.buttons a:hover{

transform:translateY(-8px);

box-shadow:

0 0 55px #8f00ff;

}






/* SERVER INFO */


.server-info{

margin-top:50px;

width:520px;

max-width:100%;

padding:35px;

background:

rgba(255,255,255,.07);

border-radius:25px;

border:

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

backdrop-filter:blur(20px);

}



.server-info h2{

font-size:38px;

color:#c13dff;

}



.server-info p{

margin-top:15px;

color:#00ff88;

font-weight:700;

}





/* TITLES */


section>h2{

text-align:center;

font-size:55px;

font-weight:900;

margin-bottom:70px;

text-shadow:

0 0 30px #8f00ff;

}





/* FEATURES */


#features{

padding:140px 0;

}



.feature-box{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:35px;

}



.feature-box div{

padding:45px 35px;

background:

rgba(255,255,255,.06);

border-radius:30px;

border:

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

transition:.4s;

overflow:hidden;

position:relative;

}



.feature-box div:hover{

transform:

translateY(-15px);

border-color:#8f00ff;

box-shadow:

0 0 45px #8f00ff55;

}



.feature-box h3{

font-size:30px;

color:#c13dff;

margin-bottom:20px;

}



.feature-box p{

color:#ccc;

line-height:30px;

}






/* GAME MODES */


#games{

padding:140px 0;

}



.game-box{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}



.game-box div{

height:250px;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

font-weight:900;

border-radius:30px;

background:

linear-gradient(

135deg,

rgba(143,0,255,.3),

rgba(255,255,255,.05)

);


border:

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

transition:.5s;

}



.game-box div:hover{

transform:

scale(1.06);

box-shadow:

0 0 50px #8f00ff;

}
/* =======================================================
              STYLE.CSS PART 3
======================================================= */


/* =======================================================
                    MARKET
======================================================= */


#store{

padding:140px 0;

}



.store-grid{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:35px;

}



.store-card{

background:

rgba(255,255,255,.06);

padding:45px 30px;

border-radius:30px;

text-align:center;

border:

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

transition:.4s;

}



.store-card:hover{

transform:

translateY(-15px);

box-shadow:

0 0 50px #8f00ff;

border-color:#8f00ff;

}



.store-card h3{

font-size:35px;

color:#c13dff;

}



.price{

font-size:45px;

font-weight:900;

margin:25px 0;

text-shadow:

0 0 20px #8f00ff;

}



.store-card p{

color:#ccc;

line-height:30px;

}



.store-card a{

display:inline-block;

margin-top:25px;

padding:15px 40px;

border-radius:15px;

background:

linear-gradient(

45deg,

#8f00ff,

#c13dff

);

color:white;

font-weight:800;

text-decoration:none;

transition:.3s;

}



.store-card a:hover{

transform:scale(1.08);

}







/* =======================================================
                    STAFF
======================================================= */


#staff{

padding:140px 0;

}



.staff-grid{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:35px;

}



.staff-card{

background:

rgba(255,255,255,.06);

padding:40px;

border-radius:30px;

text-align:center;

border:

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

transition:.4s;

}



.staff-card:hover{

transform:

translateY(-15px);

box-shadow:

0 0 45px #8f00ff;

}



.staff-card img{

width:140px;

height:140px;

border-radius:50%;

object-fit:cover;

border:

4px solid #8f00ff;

box-shadow:

0 0 30px #8f00ff;

}



.staff-card h3{

font-size:28px;

margin-top:20px;

}



.rank{

color:#c13dff;

font-weight:800;

margin-top:10px;

}







/* =======================================================
                    GALLERY
======================================================= */


#gallery{

padding:140px 0;

}



.gallery-grid{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}



.gallery-item{

height:280px;

overflow:hidden;

border-radius:30px;

border:

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

}



.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}



.gallery-item:hover img{

transform:

scale(1.15);

}





/* =======================================================
                    REVIEWS
======================================================= */


#reviews{

padding:140px 0;

}



.review-grid{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}



.review-card{

background:

rgba(255,255,255,.06);

padding:40px;

border-radius:25px;

border:

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

transition:.4s;

}



.review-card:hover{

transform:

translateY(-12px);

box-shadow:

0 0 40px #8f00ff55;

}



.stars{

font-size:25px;

color:#ffd700;

}



.review-card p{

margin-top:20px;

color:#ddd;

line-height:30px;

}



.player-name{

margin-top:25px;

color:#c13dff;

font-weight:800;

}
/* =======================================================
              STYLE.CSS PART 4
======================================================= */


/* =======================================================
                    FAQ
======================================================= */


#faq{

padding:140px 0;

}



.faq-box{

width:90%;

max-width:1000px;

margin:auto;

}



.faq-item{

background:

rgba(255,255,255,.06);

padding:30px;

border-radius:25px;

margin-bottom:20px;

border:

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

transition:.4s;

}



.faq-item:hover{

border-color:#8f00ff;

box-shadow:

0 0 35px #8f00ff55;

transform:

translateX(10px);

}



.faq-item h3{

font-size:24px;

color:#c13dff;

margin-bottom:15px;

}



.faq-item p{

color:#ccc;

line-height:30px;

}






/* =======================================================
                    DISCORD
======================================================= */


#discord{

padding:150px 20px;

text-align:center;

}



#discord p{

max-width:700px;

margin:30px auto;

font-size:20px;

line-height:35px;

color:#ccc;

}



#discord a{

display:inline-block;

padding:18px 55px;

background:#5865F2;

border-radius:18px;

text-decoration:none;

color:white;

font-weight:900;

font-size:18px;

box-shadow:

0 0 40px #5865F255;

transition:.4s;

}



#discord a:hover{

transform:

translateY(-10px);

box-shadow:

0 0 70px #5865F2;

}







/* =======================================================
                    FOOTER
======================================================= */


footer{

padding:60px 20px;

text-align:center;

background:

rgba(0,0,0,.5);

border-top:

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

}



.footer-links{

margin-bottom:30px;

}



.footer-links a{

color:white;

text-decoration:none;

margin:0 15px;

font-weight:600;

transition:.3s;

}



.footer-links a:hover{

color:#c13dff;

}



footer p{

color:#999;

}






/* =======================================================
                    EFFECTS
======================================================= */


@keyframes float{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


100%{

transform:translateY(0);

}


}



.hero-content{

animation:

float 5s infinite;

}



@keyframes glow{


0%{

text-shadow:

0 0 10px #8f00ff;

}


50%{

text-shadow:

0 0 40px #8f00ff;

}


100%{

text-shadow:

0 0 10px #8f00ff;

}


}



.hero h1{

animation:

glow 3s infinite;

}







/* =======================================================
                    MOBILE
======================================================= */


@media(max-width:900px){



.container{

flex-direction:column;

gap:20px;

}



nav{

display:none;

}



.hero h1{

font-size:55px;

}



.hero h3{

font-size:16px;

}



.hero p{

font-size:16px;

}



.buttons{

flex-direction:column;

}



.buttons a{

text-align:center;

}



section>h2{

font-size:38px;

}



.server-info h2{

font-size:28px;

}



.store-grid,
.staff-grid,
.gallery-grid,
.review-grid,
.feature-box,
.game-box{

grid-template-columns:1fr;

}



}
/* =======================================================
          VORTEXMC FINAL EFFECTS
======================================================= */


/* MOUSE GLOW */


.mouse-glow{

position:fixed;

width:250px;

height:250px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(143,0,255,.35),

transparent 70%

);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:-1;

filter:blur(20px);

}






/* PAGE LOAD */


body{

opacity:1;

transition:opacity .8s ease;

}






/* EXTRA NEON EFFECT */


.store-card,
.staff-card,
.feature-box div,
.review-card,
.gallery-item,
.game-box div{

position:relative;

overflow:hidden;

}



.store-card::before,
.staff-card::before,
.feature-box div::before,
.review-card::before{


content:"";

position:absolute;

top:-50%;

left:-50%;

width:200%;

height:200%;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.15),

transparent

);

transform:rotate(25deg);

transition:.6s;

}



.store-card:hover::before,
.staff-card:hover::before,
.feature-box div:hover::before,
.review-card:hover::before{


left:100%;


}







/* BUTTON ANIMATION */


.buttons a,
.store-card a,
#discord a{


position:relative;

overflow:hidden;

}



.buttons a::after,
.store-card a::after,
#discord a::after{


content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

rgba(255,255,255,.25);

transition:.5s;

}



.buttons a:hover::after,
.store-card a:hover::after,
#discord a:hover::after{


left:100%;

}







/* MOBILE HEADER */


@media(max-width:700px){


header{

padding:15px 0;

}


.logo h2{

font-size:25px;

}



.logo img{

width:50px;

}



.hero{

height:auto;

padding-top:160px;

padding-bottom:80px;

}



.hero h1{

font-size:45px;

}



.server-info{

padding:25px;

}



}




/* TEXT SELECTION */


::selection{

background:#8f00ff;

color:white;

}