body {

margin:0;
padding:0;

font-family:'Roboto',sans-serif;

background-image:url('img.jpg');
background-size:cover;
background-position:center;
background-attachment:fixed;

height:100vh;

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

color:white;

overflow:hidden;

}

/* overlay simplu */

.overlay{

position:absolute;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

}

/* content */

.content{

position:relative;

display:flex;
flex-direction:column;
align-items:center;

animation:fade 1.2s ease;

}

/* title */

h1{

font-size:3.5rem;

letter-spacing:6px;

margin:0;

text-shadow:
0 0 10px #fff,
0 0 25px rgba(255,255,255,0.6);

}

/* subtitle */

h2{

margin-top:10px;

opacity:0.9;

}

/* discord */

.discord{

margin-top:20px;
margin-bottom:35px;

text-decoration:none;

color:white;

padding:12px 28px;

border-radius:8px;

font-size:1.2rem;

background:#5865F2;

transition:0.3s;

}

.discord:hover{

transform:scale(1.1);

box-shadow:0 0 25px rgba(88,101,242,1);

}

/* links */

.links{

display:flex;

gap:25px;

margin-bottom:20px;

}

.links a{

text-decoration:none;

color:white;

padding:10px 18px;

border-radius:8px;

border:1px solid rgba(255,255,255,0.4);

transition:0.3s;

}

.links a:hover{

transform:scale(1.1);

border-color:white;

box-shadow:0 0 10px rgba(255,255,255,0.6);

}

/* audio */

audio{

margin-top:15px;

filter:invert(1);

}

/* fade */

@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}