/* RESET */

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

html,body{
height:100%;
color:white;
}

/* BACKGROUND */

body{
background:url("SakuraSMP.png") no-repeat center center fixed;
background-size:cover;
position:relative;
}

body::before{
content:"";
position:fixed;
inset:0;
background:rgba(0,0,0,0.55);
z-index:0;
pointer-events:none;
}

/* LAYOUT */

header,main,footer{
position:relative;
z-index:1;
}

/* HEADER */

header{
text-align:center;
padding:40px 20px;
}

header h1{
font-size:36px;
margin-bottom:20px;
}

/* MENU */

nav{
margin-bottom:10px;
}

nav a{
text-decoration:none;
}

/* BUTTON CHUNG */

button{

padding:10px 20px;
margin:6px;

border-radius:12px;
border:2px solid #ff7ac8;

background:transparent;
color:white;

font-weight:bold;
cursor:pointer;

transition:0.3s;

}

button:hover{

background:#ff7ac8;
color:white;

box-shadow:0 0 10px #ff7ac8;

}

/* MAIN */

main{
display:flex;
justify-content:center;
align-items:center;
min-height:60vh;
padding:20px;
}

/* GLASS BOX */

.glass-box{

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

padding:35px;

background:rgba(255,255,255,0.08);
backdrop-filter:blur(14px);

border:2px solid rgba(255,255,255,0.35);
border-radius:18px;

box-shadow:0 0 30px rgba(0,0,0,0.5);

}

/* COPY IP BUTTON */

.copy-btn{

border:2px solid #00e1ff;

}

.copy-btn:hover{

background:#00e1ff;
box-shadow:0 0 10px #00e1ff;

}

/* DISCORD BUTTON */

.discord-btn{

border:2px solid #5865F2;

}

.discord-btn:hover{

background:#5865F2;
box-shadow:0 0 10px #5865F2;

}

/* FOOTER */

footer{

text-align:center;
padding:30px;

}

/* HR */

hr{

border:none;
height:1px;
background:rgba(255,255,255,0.4);
margin:20px 0;

}

/* MOBILE */

@media (max-width:768px){

nav button{
width:100%;
max-width:250px;
}

.glass-box{
padding:20px;
}

}