/* ==================================
   UnknownMC.DE Global Style System
   Premium Minecraft Network Design
================================== */


:root{

    --accent:#B026FF;
    --accent-dark:#7A2CFF;
    --accent-light:#D8A8FF;

    --background:#050008;

    --text:#F0E8FF;
    --muted:#B9ACD8;

    --panel:rgba(20,10,35,.72);

    --line:rgba(255,255,255,.12);

    --radius:22px;

    --shadow:

    0 0 40px rgba(176,38,255,.25);

}





*{

    box-sizing:border-box;

}





html{

    scroll-behavior:smooth;

}





body{

    margin:0;

    min-height:100vh;

    font-family:

    Inter,
    Arial,
    sans-serif;


    color:var(--text);


    background:

    radial-gradient(

        circle at top,

        rgba(176,38,255,.35),

        transparent 40%

    ),

    linear-gradient(

        180deg,

        #160020,

        #050008

    );


    overflow-x:hidden;

}





/* ==========================
   TEXT
========================== */


h1,
h2,
h3,
h4,
h5,
h6{

    font-family:

    Oxanium,
    Inter,
    sans-serif;


    color:#ffffff;

    font-weight:900;

}



p{

    color:var(--muted);

    line-height:1.8;

}



a{

    color:white;

    text-decoration:none;

    transition:.3s ease;

}



a:hover{

    color:var(--accent-light);

}





/* ==========================
   BACKGROUND
========================== */


.background{

    position:fixed;

    inset:0;

    z-index:-1;


    background:


    radial-gradient(

        circle at 20% 30%,

        rgba(176,38,255,.20),

        transparent 35%

    ),


    radial-gradient(

        circle at 80% 70%,

        rgba(216,168,255,.15),

        transparent 35%

    );


    animation:

    bgMove 20s infinite alternate;

}



@keyframes bgMove{

    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.15);

    }

}





/* ==========================
   HERO
========================== */


.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 20px;

}



.hero-content{

    width:min(1200px,95vw);

}





.logo{

    width:420px;

    max-width:85vw;


    filter:

    drop-shadow(

    0 0 35px rgba(176,38,255,.75)

    );

}





h1{

    font-size:75px;

    margin:25px 0 15px;

}



h1 span{

    display:block;

    margin-top:10px;

    font-size:38px;

    color:var(--accent-light);

}





/* ==========================
   BUTTONS
========================== */


.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

    margin:35px 0;

}



.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:

    14px 28px;


    border-radius:16px;


    font-family:Oxanium;


    font-weight:900;


    color:white !important;


    background:

    rgba(176,38,255,.18);


    border:

    1px solid rgba(216,168,255,.35);


}



.btn.primary{


    background:

    linear-gradient(

        135deg,

        #B026FF,

        #D8A8FF

    );


    border:none;

}






/* ==========================
   SERVER BOX
========================== */


.server-box{


    margin-top:45px;


    padding:30px;


    border-radius:24px;


    background:

    rgba(20,10,35,.8);


    border:

    1px solid var(--line);


    box-shadow:

    var(--shadow);


    backdrop-filter:

    blur(18px);

}



.status{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}



#status{

    font-family:Oxanium;

    font-size:22px;

    font-weight:900;

    color:white;

}



#players{

    color:var(--muted);

}



.dot{

    width:15px;

    height:15px;

    border-radius:50%;


    background:#42ff65;


    box-shadow:

    0 0 25px #42ff65;

}




.ips{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:30px;

    flex-wrap:wrap;

}



.ips div{

    min-width:240px;

    padding:20px;


    border-radius:18px;


    background:

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

}



.ips h3{

    color:var(--accent-light);

}



.ips p{

    color:white;

}





/* ==========================
   NAVIGATION
========================== */


nav{


    position:sticky;

    top:0;

    z-index:20;


    display:flex;

    justify-content:center;

    gap:15px;


    padding:15px;


    background:

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


    backdrop-filter:

    blur(18px);

}



nav a{

    padding:

    10px 22px;


    border-radius:

    999px;


    border:

    1px solid var(--line);


    color:white;

}



nav a:hover{

    background:

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


    box-shadow:

    0 0 25px rgba(176,38,255,.4);

}





/* ==========================
   SECTIONS
========================== */


.section{

    width:min(1200px,92vw);

    margin:90px auto;

}





.card{


    padding:30px;


    border-radius:var(--radius);


    background:

    var(--panel);


    border:

    1px solid var(--line);


    backdrop-filter:

    blur(18px);


    box-shadow:

    var(--shadow);

}



.grid{

    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;

}



.big{

    text-align:center;

}





.small-logo{


    width:140px;


    filter:

    drop-shadow(

    0 0 25px rgba(176,38,255,.7)

    );

}





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


footer{


    padding:

    50px 20px;


    text-align:center;


    background:#050008;


    border-top:

    1px solid var(--line);

}



.footer-logo{

    width:130px;

    margin-bottom:20px;


}



.footer-buttons{


    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:25px;

}





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


@media(max-width:900px){


    .grid{

        grid-template-columns:1fr;

    }


    h1{

        font-size:45px;

    }


    h1 span{

        font-size:24px;

    }


    .ips{

        flex-direction:column;

        align-items:center;

    }

}