*{
box-sizing:border-box;
}

html,body{
margin:0;
width:100%;
min-height:100%;
font-family:Arial,sans-serif;
background:#050505;
color:white;
}


/* MAIN */

body{
display:flex;
align-items:center;
justify-content:center;
}


.app{
width:100%;
max-width:480px;
padding:25px;
text-align:center;
}


.app h2{
font-size:30px;
margin-bottom:25px;
}


/* PLAYER */

.player{
width:100%;
aspect-ratio:16/9;
background:#000;
border-radius:25px;
overflow:hidden;
position:relative;
box-shadow:0 20px 60px #000;
}


.player img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.45);
}


.play{

position:absolute;
top:50%;
left:50%;

transform:translate(-50%,-50%);

width:95px;
height:95px;

background:
linear-gradient(
135deg,
#ff0055,
#ff8500
);

border-radius:50%;

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

font-size:42px;

}



/* INFO */


.meta{
color:#999;
font-size:18px;
}



/* BUTTON */

button{

width:100%;

padding:18px;

border:0;

border-radius:50px;

font-size:22px;

font-weight:bold;

color:white;

background:
linear-gradient(
90deg,
#ff0055,
#ff8500
);

}



/* POPUP BENAR */

#popup{

display:none;

position:fixed;

top:0;
left:0;

width:100vw;
height:100vh;

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

z-index:999999;

align-items:center;

justify-content:center;

padding:20px;

}



.server-box{

width:100%;
max-width:420px;

background:#171717;

border-radius:25px;

padding:25px;

text-align:center;

box-shadow:
0 0 80px #000;

}



.server-box h2{

font-size:28px;

}



/* LINK SERVER */

.server{

display:block;

width:100%;

padding:16px;

margin:12px 0;

border-radius:15px;

color:white!important;

text-decoration:none;

font-size:18px;

font-weight:bold;

}



.green{

background:#00a843;

}


.blue{

background:#006dff;

}



/* FACEBOOK MOBILE FIX */

@media(max-width:600px){


body{

min-height:100vh;

align-items:center;

}


.app{

padding:20px;

}


.app h2{

font-size:28px;

}


}