*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

body{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(145deg,#0a0a0a,#141414,#1b1b1b);
color:white;
}

/* container */

.container{
display:flex;
gap:2rem;
flex-wrap:wrap;
justify-content:center;
align-items:center;
padding:2rem;
}

/* base button */

.btn{
text-decoration:none;
padding:1.2rem 3rem;
border-radius:14px;
font-size:1.4rem;
font-weight:600;
letter-spacing:0.04em;
transition:all .25s ease;
position:relative;
overflow:hidden;
min-width:180px;
text-align:center;
}

/* SFW style */

.sfw{
background:linear-gradient(135deg,#00c6ff,#0072ff);
color:white;
box-shadow:0 8px 20px rgba(0,114,255,.35);
}

.sfw:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 12px 28px rgba(0,114,255,.5);
}

/* NSFW style */

.nsfw{
background:linear-gradient(135deg,#ff3b7a,#ff0055);
color:white;
box-shadow:0 8px 20px rgba(255,0,85,.35);
}

.nsfw:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 12px 28px rgba(255,0,85,.5);
}

/* mobile scaling */

@media (max-width:600px){

.container{
flex-direction:column;
gap:1.5rem;
}

.btn{
width:80vw;
max-width:320px;
font-size:1.2rem;
}

}