:root {

    --black:#000000;
    --white:#FFFFFF;

    --red:#d9252f;
    --yellow:#ffd100;

}



html,
body {

    height:100%;
    margin:0;

}



body {


    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;


    color:var(--white);


    background:

        linear-gradient(
            rgba(0,0,0,.20),
            rgba(0,0,0,.30)
        ),

        url('/background.webp');


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}




.overlay {


    min-height:100vh;


    display:flex;


    align-items:center;


}




.glass-card {


    background:

        rgba(0,0,0,.72);



    border:

        1px solid

        rgba(255,255,255,.12);



    backdrop-filter:blur(15px);



    border-radius:20px;



    padding:45px;



    box-shadow:

        0 30px 80px rgba(0,0,0,.8);

}




.logo {


    width:240px;

    max-width:100%;

}



.description {


    font-size:1.3rem;

    font-weight:600;

}



.muted {


    color:#cccccc;

    line-height:1.7;

}





.server-info {


    border-left:

        4px solid var(--red);


    padding-left:30px;

}



.server-info h1 {


    font-size:2.5rem;

    font-weight:900;


}



.status {


    display:inline-flex;


    align-items:center;


    gap:10px;


    margin-bottom:35px;


    color:var(--yellow);


    font-weight:700;

}



.status span {


    width:12px;

    height:12px;


    background:#44d925;


    border-radius:50%;


}




.item {


    margin-bottom:30px;

}



.item label {


    display:block;


    color:var(--yellow);


    font-weight:800;


    font-size:.8rem;


    letter-spacing:1px;


    margin-bottom:10px;

}



code {


    display:inline-block;


    background:

        rgba(217,37,47,.15);



    color:white;



    padding:

        12px 18px;



    border-radius:8px;


    border:

        1px solid

        var(--red);


}



li {

    margin-bottom:10px;

}



.join-button {


    border:0;


    background:var(--red);


    color:white;



    font-weight:800;


    padding:

        14px 35px;



    border-radius:50px;


    transition:.25s;

}



.join-button:hover {


    background:var(--yellow);


    color:black;


    transform:translateY(-3px);

}




#copy-message {


    margin-top:15px;


    color:var(--yellow);


    font-weight:700;

}





footer {


    position:fixed;


    bottom:20px;


    width:100%;


    text-align:center;


    color:

        rgba(255,255,255,.5);


}



@media(max-width:768px){


    .glass-card {

        padding:30px;

    }


    footer {

        position:relative;

        margin-top:20px;

    }


}