@font-face {

    font-family: Minecraft;

    src:
    url("assets/minecraft.ttf");

}



*{

    box-sizing:border-box;

}



body{


    margin:0;


    color:white;


    font-family:Arial,sans-serif;


    background:

    linear-gradient(
        rgba(0,0,0,.85),
        rgba(0,0,0,.9)
    ),

    url("assets/background.jpg");


    background-size:cover;


    background-attachment:fixed;


}





.hero{


    height:280px;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:80px;


    text-align:center;


    border-bottom:
    3px solid #55ff55;


}





.hero h1{


    font-family:Minecraft;


    font-size:60px;


    color:#55ff55;


    text-shadow:

    0 0 15px black;


}



.hero p{

    color:#aaa;

    font-size:20px;

}



.creeper{


    width:180px;


    image-rendering:pixelated;


}





section{


    max-width:1100px;


    margin:50px auto;


}





.server-box{


    background:

    rgba(20,20,20,.9);


    padding:35px;


    border-radius:15px;


    box-shadow:

    0 0 30px black;


}





.status{


    text-align:center;


    padding:20px;


    font-size:28px;


    border-radius:10px;


    font-weight:bold;


}



.online{


    color:#55ff55;


    background:#123b12;


    box-shadow:

    0 0 20px #55ff55;


}



.offline{


    color:red;


    background:#400000;


}




.stats{


    display:flex;


    justify-content:space-around;


    margin-top:35px;


}




.stat{


    background:#222;


    padding:25px;


    border-radius:12px;


    text-align:center;


    min-width:220px;


}



.stat span{

    font-size:35px;

}



.stat h3{

    color:#aaa;

}



.stat p{


    color:#55ff55;


    font-size:25px;


}





h2{


    text-align:center;


    font-family:Minecraft;


    color:#55ff55;


    font-size:32px;


}






.ranking{


    display:flex;


    flex-direction:column;


    gap:15px;


}




.player-card{


    display:flex;


    align-items:center;


    background:

    rgba(25,25,25,.95);


    padding:20px;


    border-radius:12px;


    border:

    1px solid #333;


}



.player-card:hover{


    transform:scale(1.02);


    border-color:#55ff55;


}





.winner{


    box-shadow:

    0 0 15px rgba(85,255,85,.5);


}



.position{


    width:80px;


    font-size:30px;


    text-align:center;


}





.player-info{


    flex:1;


}



.player-info h3{


    margin:0;


    font-size:25px;


}



.player-info p{


    color:#55ff55;


}



.player-info span{


    color:#aaa;


}





.xp{


    font-size:20px;


    color:#ffd700;


}




footer{


    text-align:center;


    padding:40px;


    color:#777;


}