body {

margin:0;

font-family:Arial, Helvetica, sans-serif;

background:#08080d;

color:white;

}



.hero {

height:600px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;


background:

linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.8)
),

url("banner.png");


background-size:cover;

background-position:center;

}



.hero h1 {

font-size:80px;

margin:0;

}



.hero p {

font-size:24px;

}




.button {

display:inline-block;

margin-top:30px;

padding:15px 40px;

background:white;

color:black;

border-radius:30px;

text-decoration:none;

font-weight:bold;

}





section {

max-width:1000px;

margin:auto;

padding:60px 20px;

}




h2 {

font-size:40px;

}




.cards,
.team {

display:flex;

gap:20px;

}





.card,
.person,
.update {


background:#15151d;

padding:25px;

border-radius:20px;

flex:1;

transition:.3s;

}





.card:hover,
.person:hover,
.update:hover {


transform:translateY(-8px);

}





.images {


display:flex;

gap:20px;

}




.images img {


width:33%;

border-radius:20px;

cursor:pointer;

transition:.3s;


}




.images img:hover {


transform:scale(1.05);


}





.social-buttons {


position:fixed;

right:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:15px;

z-index:1000;


}





.social-buttons img {


width:60px;

height:60px;

background:white;

padding:8px;

border-radius:15px;

transition:.3s;


}





.social-buttons img:hover {


transform:scale(1.15);


}







.image-viewer {


display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.9);

justify-content:center;

align-items:center;

z-index:2000;


}




.image-viewer img {


max-width:90%;

max-height:90%;

border-radius:20px;


}





.image-viewer span {


position:absolute;

top:30px;

right:50px;

font-size:50px;

cursor:pointer;


}





footer {


text-align:center;

padding:30px;

opacity:.6;


}

/* Social buttons */

.social-buttons {

    position: fixed;
    right: 25px;
    bottom: 25px;

    display: flex;
    flex-direction: column;
    gap: 15px;

    z-index: 1000;

}



.social {

    width: 65px;
    height: 65px;

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

    border-radius: 18px;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(8px);

    transition: 0.3s;

}



.social img {

    width: 45px;
    height: 45px;

    object-fit: contain;

}



.social:hover {

    transform: scale(1.15);

}



/* Discord */

.discord {

    background: rgba(88,101,242,0.25);

}



/* Roblox */

.roblox {

    background: rgba(255,255,255,0.12);

}