/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

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

body{
background-color:#111;
color:white;
}

/* Header */

header{
background:#000;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

header h1{
color:gold;
}

nav ul{
list-style:none;
display:flex;
gap:20px;
}

nav a{
text-decoration:none;
color:white;
font-weight:bold;
}

nav a:hover{
color:gold;
}

/* Hero */

.hero{
text-align:center;
padding:120px 20px;
}

.hero h2{
font-size:48px;
margin-bottom:20px;
}

.hero p{
font-size:20px;
margin-bottom:30px;
}

.join-btn{
background:gold;
color:black;
padding:15px 30px;
text-decoration:none;
font-weight:bold;
border-radius:5px;
}

.join-btn:hover{
background:#e6c200;
}

.server-counter{
margin-top:25px;
font-size:18px;
}

.server-status{
margin-top:10px;
font-size:18px;
}

.server-extra{
margin-top:15px;
font-size:18px;
}

#playerlist{
margin-top:15px;
list-style:none;
padding:0;
}

#playerlist li{
background:#1a1a1a;
margin:5px auto;
padding:8px;
width:250px;
border-radius:6px;
}

.online{
color:lime;
font-weight:bold;
}

.offline{
color:red;
font-weight:bold;
}
/* Info */

.info{
padding:80px 20px;
text-align:center;
}

.cards{
margin-top:40px;
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.card{
background:#1a1a1a;
padding:30px;
border-radius:10px;
width:250px;
}

.card h3{
margin-bottom:15px;
color:gold;
}

/* Team */

.team{
padding:80px 20px;
text-align:center;
}

.team-container{
display:flex;
justify-content:center;
gap:30px;
margin-top:40px;
flex-wrap:wrap;
}

.team-card{
background:#1a1a1a;
padding:20px;
border-radius:10px;
width:200px;
}

.team-card img{
border-radius:50%;
margin-bottom:15px;
}

/* Discord */

.discord{
text-align:center;
padding:80px 20px;
}

/* Footer */

footer{
background:black;
text-align:center;
padding:20px;
margin-top:50px;
}

/* NAVBAR ANIMATION */

#navbar{
position:fixed;
top:0;
width:100%;
background:rgba(0,0,0,0.8);
backdrop-filter:blur(10px);
transition:0.3s;
z-index:1000;
}

#navbar.scrolled{
background:#000;
box-shadow:0 0 15px rgba(255,215,0,0.3);
}

.logo{
color:gold;
font-size:22px;
}

nav a{
position:relative;
}

nav a::after{
content:"";
position:absolute;
width:0%;
height:2px;
left:0;
bottom:-5px;
background:gold;
transition:0.3s;
}

nav a:hover::after{
width:100%;
}


/* SERVER PANEL */

.server-panel{
margin-top:30px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.panel-box{
background:#1a1a1a;
padding:20px;
border-radius:10px;
width:150px;
text-align:center;
box-shadow:0 0 10px rgba(0,0,0,0.5);
}

.panel-box h3{
color:gold;
margin-bottom:5px;
}