*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Inter',sans-serif;
background:#0b0b0f;
color:white;
overflow-x:hidden;
}

/* NAV */
nav{
padding:20px 6%;
display:flex;
justify-content:space-between;
align-items:center;
}

nav a{
color:white;
margin-left:20px;
text-decoration:none;
}

/* HERO */
.hero{
padding:100px 6%;
text-align:center;
}

.gradient-text{
font-size:42px;
font-weight:900;
background:linear-gradient(90deg,#ff00cc,#00f0ff,#8f00ff);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:gradientMove 5s infinite linear;
}

@keyframes gradientMove{
0%{background-position:0%}
100%{background-position:300%}
}

/* GLITCH */
.glitch{
position:relative;
}
.glitch::before,
.glitch::after{
content:attr(data-text);
position:absolute;
left:0;
}
.glitch::before{
color:#ff00cc;
z-index:-1;
animation:glitch1 1s infinite;
}
.glitch::after{
color:#00f0ff;
z-index:-2;
animation:glitch2 1s infinite;
}
@keyframes glitch1{
0%{transform:translate(2px,2px)}
50%{transform:translate(-2px,-1px)}
100%{transform:translate(0)}
}
@keyframes glitch2{
0%{transform:translate(-2px,1px)}
50%{transform:translate(2px,-2px)}
100%{transform:translate(0)}
}

/* INPUTS */
input{
margin-top:20px;
padding:12px 20px;
border-radius:30px;
border:none;
width:90%;
max-width:320px;
}

button{
margin-top:15px;
padding:10px 25px;
border-radius:30px;
border:none;
background:#ff00cc;
color:white;
cursor:pointer;
}

/* DARE + OPINION CARDS */
#dareList div,
#opinionList div,
#dictionaryList div,
#featuredDare{
background:rgba(255,255,255,0.05);
margin:20px auto;
padding:20px;
border-radius:20px;
width:90%;
max-width:500px;
display:flex;
justify-content:space-between;
align-items:center;
}

.vote-btn{
background:#00f0ff;
color:black;
border:none;
padding:6px 15px;
border-radius:20px;
cursor:pointer;
}

/* FEATURED */
.featured{
padding:60px 6%;
text-align:center;
}

/* MOBILE */
@media(max-width:600px){
.gradient-text{font-size:30px;}
nav{flex-direction:column;}
}